:root{--pu:#7C6FFF;--pu-hi:#A89EFF;--pu-lo:#5A4FE0;--pu-d:rgba(124,111,255,0.10);--pu-b:rgba(124,111,255,0.22);--pu-g:rgba(124,111,255,0.06);--te:#4FD8EB;--te-d:rgba(79,216,235,0.09);--te-b:rgba(79,216,235,0.22);--gn:#34D399;--gn-d:rgba(52,211,153,0.09);--gn-b:rgba(52,211,153,0.22);--am:#FBBF24;--am-d:rgba(251,191,36,0.09);--am-b:rgba(251,191,36,0.22);--rd:#F87171;--rd-d:rgba(248,113,113,0.09);--rd-b:rgba(248,113,113,0.22);--bg:#050608;--sf:#0C0E14;--sf2:#111520;--sf3:#171C2B;--sf4:#1E2438;--bd:rgba(255,255,255,0.055);--bd2:rgba(255,255,255,0.10);--bd3:rgba(255,255,255,0.16);--tx:#EDF0FF;--tx2:rgba(237,240,255,0.62);--tx3:rgba(237,240,255,0.38);--tx4:rgba(237,240,255,0.22);--tx5:rgba(237,240,255,0.10);--sw:228px;--th:52px;--r:10px;--r2:14px;--r3:18px;--shadow:0 4px 20px rgba(0,0,0,0.55),0 2px 6px rgba(0,0,0,0.3);--shadow-lg:0 24px 64px rgba(0,0,0,0.65),0 8px 24px rgba(0,0,0,0.4)}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--tx);font-family:'DM Sans',sans-serif;overflow:hidden;height:100vh}
body::before{content:'';position:fixed;top:0;left:0;width:100%;height:100%;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");pointer-events:none;z-index:0}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--sf4);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--bd3)}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes modalIn{from{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes toastIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
@keyframes gaugeAnim{from{stroke-dashoffset:283}to{stroke-dashoffset:var(--gauge-target)}}
@keyframes countUp{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
.sidebar{position:fixed;top:0;left:0;width:var(--sw);height:100vh;background:var(--sf);border-right:1px solid var(--bd);display:flex;flex-direction:column;z-index:50;transition:transform .3s}
.sb-brand{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--bd)}
.sb-logo{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,var(--pu),var(--pu-lo));display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-size:14px;font-weight:800;color:#fff;flex-shrink:0}
.sb-brand-text{font-family:'Syne',sans-serif;font-size:16px;font-weight:700}
.sb-nav{flex:1;overflow-y:auto;padding:12px 0}
.sb-section{padding:8px 18px 4px;font-size:10px;font-weight:600;color:var(--tx4);letter-spacing:1px;text-transform:uppercase}
.sb-link{display:flex;align-items:center;gap:10px;padding:9px 18px;margin:1px 8px;border-radius:8px;font-size:13.5px;color:var(--tx2);cursor:pointer;transition:all .15s;position:relative;text-decoration:none}
.sb-link:hover{background:var(--sf2);color:var(--tx)}
.sb-link.active{background:var(--pu-d);color:var(--pu-hi);font-weight:600}
.sb-link.active::before{content:'';position:absolute;left:-8px;top:50%;transform:translateY(-50%);width:3px;height:20px;background:var(--pu);border-radius:2px}
.sb-link svg{width:18px;height:18px;opacity:.7;flex-shrink:0}
.sb-link.active svg{opacity:1}
.sb-bottom{padding:12px;border-top:1px solid var(--bd)}
.sb-user{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r);cursor:pointer;transition:background .2s}
.sb-user:hover{background:var(--sf2)}
.main{margin-left:var(--sw);height:100vh;display:flex;flex-direction:column;position:relative;z-index:1}
.topbar{height:var(--th);min-height:var(--th);background:var(--sf);border-bottom:1px solid var(--bd);display:flex;align-items:center;padding:0 24px;gap:16px}
.topbar-title{font-family:'Syne',sans-serif;font-size:16px;font-weight:600;white-space:nowrap}
.topbar-bc{font-size:12px;color:var(--tx3);margin-left:-8px}
.topbar-search{margin-left:auto;position:relative}
.topbar-search input{background:var(--sf2);border:1px solid var(--bd);border-radius:var(--r);padding:8px 12px 8px 34px;color:var(--tx);font-size:13px;width:220px;font-family:'DM Sans',sans-serif;outline:none;transition:all .2s}
.topbar-search input:focus{border-color:var(--pu);width:280px}
.topbar-search input::placeholder{color:var(--tx4)}
.topbar-search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--tx4)}
.topbar-actions{display:flex;align-items:center;gap:8px}
.ib{width:34px;height:34px;border-radius:8px;border:1px solid var(--bd);background:var(--sf2);color:var(--tx2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;position:relative}
.ib:hover{background:var(--sf3);color:var(--tx)}
.ib .dot{position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--rd);border:1.5px solid var(--sf2)}
.av{width:32px;height:32px;border-radius:50%;background:var(--pu-d);color:var(--pu);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;border:1.5px solid var(--pu-b)}
.av.sm{width:26px;height:26px;font-size:10px}
.content{flex:1;overflow-y:auto;padding:24px;background:var(--bg)}
.sc{background:var(--sf);border:1px solid var(--bd);border-radius:var(--r2);padding:20px;animation:fadeUp .4s ease}
.sc .sc-label{font-size:12px;color:var(--tx3);font-weight:500;margin-bottom:8px}
.sc .sc-value{font-family:'Syne',sans-serif;font-size:28px;font-weight:700}
.sc .sc-change{font-size:12px;margin-top:6px;display:flex;align-items:center;gap:4px}
.sc .sc-change.up{color:var(--gn)}
.sc .sc-change.down{color:var(--rd)}
.card{background:var(--sf);border:1px solid var(--bd);border-radius:var(--r2);animation:fadeUp .4s ease}
.ch{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--bd)}
.ct{font-family:'Syne',sans-serif;font-size:15px;font-weight:600}
.cb{padding:20px}
.badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:100px;font-size:11px;font-weight:600;white-space:nowrap}
.badge-pu{background:var(--pu-d);color:var(--pu-hi);border:1px solid var(--pu-b)}
.badge-te{background:var(--te-d);color:var(--te);border:1px solid var(--te-b)}
.badge-gn{background:var(--gn-d);color:var(--gn);border:1px solid var(--gn-b)}
.badge-am{background:var(--am-d);color:var(--am);border:1px solid var(--am-b)}
.badge-rd{background:var(--rd-d);color:var(--rd);border:1px solid var(--rd-b)}
.badge-dk{background:var(--sf3);color:var(--tx2);border:1px solid var(--bd2)}
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--r);font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;cursor:pointer;border:none;transition:all .2s;white-space:nowrap}
.btn-p{background:var(--pu);color:#fff;box-shadow:0 2px 10px rgba(124,111,255,0.25)}
.btn-p:hover{background:var(--pu-hi);box-shadow:0 4px 16px rgba(124,111,255,0.35)}
.btn-s{background:var(--sf2);color:var(--tx);border:1px solid var(--bd2)}
.btn-s:hover{background:var(--sf3);border-color:var(--bd3)}
.btn-d{background:transparent;color:var(--tx2);border:1px solid var(--bd)}
.btn-d:hover{background:var(--sf2);color:var(--tx)}
.btn-ok{background:var(--gn);color:#000}
.btn-ok:hover{background:#3ee0a5}
.btn-rd{background:var(--rd);color:#fff}
.btn-rd:hover{background:#ff8a8a}
.btn-sm{padding:5px 10px;font-size:12px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.fi{width:100%;padding:9px 12px;background:var(--sf2);border:1px solid var(--bd2);border-radius:var(--r);color:var(--tx);font-family:'DM Sans',sans-serif;font-size:13px;outline:none;transition:border-color .2s}
.fi:focus{border-color:var(--pu)}
.fi::placeholder{color:var(--tx4)}
select.fi{appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='rgba(237,240,255,0.38)' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
textarea.fi{resize:vertical;min-height:80px}
.fr{margin-bottom:14px}
.fl{display:block;font-size:12px;font-weight:500;color:var(--tx2);margin-bottom:5px}
.modal-ov{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:200;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.modal-ov.show{display:flex}
.modal{background:var(--sf);border:1px solid var(--bd);border-radius:var(--r3);width:100%;max-width:560px;max-height:85vh;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);animation:modalIn .25s ease}
.modal.wide{max-width:720px}
.mh{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid var(--bd)}
.mh h3{font-family:'Syne',sans-serif;font-size:16px;font-weight:600}
.mh .close{width:28px;height:28px;border-radius:6px;border:none;background:var(--sf2);color:var(--tx3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}
.mh .close:hover{background:var(--sf3);color:var(--tx)}
.mb{padding:24px;overflow-y:auto;flex:1}
.mf{padding:16px 24px;border-top:1px solid var(--bd);display:flex;justify-content:flex-end;gap:10px}
.toast-container{position:fixed;top:16px;right:16px;z-index:300;display:flex;flex-direction:column;gap:8px}
.toast{padding:12px 18px;border-radius:var(--r);font-size:13px;font-weight:500;display:flex;align-items:center;gap:8px;animation:toastIn .3s ease;box-shadow:var(--shadow);max-width:340px}
.toast-gn{background:var(--gn-d);border:1px solid var(--gn-b);color:var(--gn)}
.toast-rd{background:var(--rd-d);border:1px solid var(--rd-b);color:var(--rd)}
.toast-pu{background:var(--pu-d);border:1px solid var(--pu-b);color:var(--pu)}
.toast-am{background:var(--am-d);border:1px solid var(--am-b);color:var(--am)}
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;padding:10px 14px;font-size:11px;font-weight:600;color:var(--tx3);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--bd);background:var(--sf2)}
.tbl td{padding:10px 14px;font-size:13px;border-bottom:1px solid var(--bd);color:var(--tx2)}
.tbl tr:hover td{background:var(--sf2)}
.filter-bar{display:flex;align-items:center;gap:10px;margin-bottom:20px;flex-wrap:wrap}
.filter-bar .fi{width:auto;min-width:160px}
.filter-bar input.fi{width:240px}
.tabs-bar{display:flex;gap:0;border-bottom:1px solid var(--bd);margin-bottom:20px}
.tab-item{padding:10px 18px;font-size:13px;font-weight:500;color:var(--tx3);cursor:pointer;border-bottom:2px solid transparent;transition:all .2s}
.tab-item:hover{color:var(--tx2)}
.tab-item.active{color:var(--pu);border-bottom-color:var(--pu);font-weight:600}
.spinner{width:20px;height:20px;border:2px solid var(--sf4);border-top-color:var(--pu);border-radius:50%;animation:spin .6s linear infinite}
.loading-overlay{display:flex;align-items:center;justify-content:center;padding:60px;flex-direction:column;gap:12px;color:var(--tx3);font-size:13px}
.empty-state{text-align:center;padding:60px 20px;color:var(--tx3)}
.empty-state .empty-icon{font-size:48px;margin-bottom:16px;opacity:.3}
.empty-state h3{font-family:'Syne',sans-serif;font-size:18px;color:var(--tx2);margin-bottom:8px}
.empty-state p{font-size:13px;margin-bottom:20px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}
.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-20{gap:20px}
.mb-16{margin-bottom:16px}.mb-20{margin-bottom:20px}.mb-24{margin-bottom:24px}
.timeline{position:relative;padding-left:24px}
.timeline::before{content:'';position:absolute;left:8px;top:0;bottom:0;width:2px;background:var(--bd)}
.timeline-item{position:relative;padding-bottom:20px}
.timeline-item::before{content:'';position:absolute;left:-20px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--sf3);border:2px solid var(--bd2)}
.timeline-item.detected::before{background:var(--rd-d);border-color:var(--rd)}
.timeline-item.verified::before{background:var(--te-d);border-color:var(--te)}
.timeline-item.notified::before{background:var(--am-d);border-color:var(--am)}
.timeline-item.resolved::before{background:var(--gn-d);border-color:var(--gn)}
.timeline-date{font-size:11px;color:var(--tx4);margin-bottom:4px}
.timeline-title{font-size:13px;font-weight:600;margin-bottom:2px}
.timeline-desc{font-size:12px;color:var(--tx3)}
.progress-bar{height:6px;background:var(--sf3);border-radius:3px;overflow:hidden}
.progress-bar .fill{height:100%;border-radius:3px;transition:width .5s ease}
.gauge-wrap{position:relative;width:180px;height:180px;margin:0 auto 16px}
.gauge-svg{width:180px;height:180px;transform:rotate(-90deg)}
.gauge-bg{fill:none;stroke:var(--sf3);stroke-width:12}
.gauge-fill{fill:none;stroke-width:12;stroke-linecap:round;transition:stroke-dashoffset 1.5s ease;stroke:var(--pu)}
.gauge-fill.gn{stroke:var(--gn)}.gauge-fill.am{stroke:var(--am)}.gauge-fill.rd{stroke:var(--rd)}
.gauge-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.gauge-score{font-family:'Syne',sans-serif;font-size:42px;font-weight:800;line-height:1}
.gauge-label{font-size:12px;color:var(--tx3);margin-top:4px}
.risk-matrix{display:grid;grid-template-columns:40px repeat(5,1fr);grid-template-rows:repeat(5,48px) 30px;gap:2px;max-width:400px}
.risk-cell{border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;cursor:pointer;transition:all .15s}
.risk-cell:hover{transform:scale(1.05);z-index:1}
.risk-label{font-size:10px;color:var(--tx3);display:flex;align-items:center;justify-content:center;text-align:center}
.risk-low{background:rgba(52,211,153,0.15);color:var(--gn)}
.risk-med{background:rgba(251,191,36,0.15);color:var(--am)}
.risk-high{background:rgba(248,113,113,0.15);color:var(--rd)}
.risk-crit{background:rgba(248,113,113,0.3);color:#ff6b6b}
.kanban{display:flex;gap:16px;overflow-x:auto;padding-bottom:16px;min-height:calc(100vh - 180px)}
.kanban-col{min-width:280px;max-width:300px;flex:1;background:var(--sf);border:1px solid var(--bd);border-radius:var(--r2);display:flex;flex-direction:column;max-height:calc(100vh - 180px)}
.kanban-header{padding:14px 16px;border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between}
.kanban-header h4{font-size:13px;font-weight:600}
.kanban-header .count{font-size:11px;color:var(--tx3);background:var(--sf3);padding:2px 8px;border-radius:100px}
.kanban-body{flex:1;overflow-y:auto;padding:10px}
.kanban-card{background:var(--sf2);border:1px solid var(--bd);border-radius:var(--r);padding:14px;margin-bottom:8px;cursor:pointer;transition:all .2s}
.kanban-card:hover{border-color:var(--bd2);box-shadow:var(--shadow)}
.kanban-card h5{font-size:13px;font-weight:600;margin-bottom:6px}
.kanban-card .meta{font-size:11px;color:var(--tx3);display:flex;justify-content:space-between;margin-top:8px}
.sla-timer{font-family:'Geist Mono',monospace;font-size:11px;font-weight:600;padding:2px 8px;border-radius:4px}
.sla-ok{background:var(--gn-d);color:var(--gn)}
.sla-warn{background:var(--am-d);color:var(--am)}
.sla-danger{background:var(--rd-d);color:var(--rd)}
.countdown{font-family:'Geist Mono',monospace;font-size:14px;font-weight:600;display:flex;gap:4px;align-items:center}
.countdown .cd-unit{text-align:center;padding:4px 8px;background:var(--sf3);border-radius:4px;min-width:40px}
.countdown .cd-label{font-size:9px;color:var(--tx3);font-weight:400;display:block}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-head{padding:8px;text-align:center;font-size:11px;font-weight:600;color:var(--tx3);text-transform:uppercase}
.cal-day{min-height:80px;padding:6px;background:var(--sf2);border:1px solid var(--bd);border-radius:4px;font-size:12px}
.cal-day .day-num{font-weight:600;color:var(--tx2);margin-bottom:4px}
.cal-day.today .day-num{color:var(--pu);font-weight:700}
.cal-day.other-month{opacity:.3}
.cal-event{font-size:10px;padding:2px 4px;border-radius:3px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-event.deadline{background:var(--rd-d);color:var(--rd)}
.cal-event.training{background:var(--te-d);color:var(--te)}
.cal-event.audit{background:var(--pu-d);color:var(--pu-hi)}
.cal-event.renewal{background:var(--am-d);color:var(--am)}
.cal-event.review{background:var(--gn-d);color:var(--gn)}
.cal-event.assessment{background:var(--sf3);color:var(--tx2)}
.checklist-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--bd);transition:background .15s}
.checklist-item:hover{background:var(--sf2)}
.checklist-item .check{width:20px;height:20px;border-radius:50%;border:2px solid var(--bd3);cursor:pointer;transition:all .2s;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.checklist-item .check.done{background:var(--gn);border-color:var(--gn)}
.checklist-item .check.done::after{content:'\2713';color:#000;font-size:11px;font-weight:700}
.checklist-item .ci-info{flex:1;min-width:0}
.checklist-item .ci-title{font-size:13px;font-weight:500}
.checklist-item .ci-meta{font-size:11px;color:var(--tx3);white-space:nowrap}
@media(max-width:900px){.sidebar{transform:translateX(-100%)}.sidebar.open{transform:translateX(0)}.main{margin-left:0}.sb-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:49;display:none}.sb-overlay.show{display:block}.grid-4{grid-template-columns:repeat(2,1fr)}.kanban{flex-direction:column}.kanban-col{min-width:100%;max-width:100%}}
@media(max-width:600px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}.filter-bar{flex-direction:column;align-items:stretch}.filter-bar .fi,.filter-bar input.fi{width:100%;min-width:0}}

/* COOKIE BANNER */
.cookie-banner{position:fixed;bottom:0;left:0;right:0;z-index:200;background:rgba(8,9,15,.95);backdrop-filter:blur(16px);border-top:1px solid var(--bd2);padding:16px 32px;display:none;animation:fadeUp .3s ease}
.cookie-inner{max-width:1160px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cookie-text{color:var(--tx2);font-size:13px;line-height:1.5}
.cookie-link{color:var(--pu-hi);text-decoration:none}
.cookie-btn{padding:8px 24px;border-radius:8px;font-size:13px;font-weight:600;color:#fff;background:var(--pu);border:none;cursor:pointer;font-family:inherit}

footer { margin-top: 40px; border-top: 1px solid var(--bd); }
.footer { margin-top: 40px; border-top: 1px solid var(--bd); padding-top: 0; }
.footer-inner { max-width: 1160px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.footer-links { display: flex; gap: 24px; }
.footer-links a { color: var(--tx3); text-decoration: none; font-size: 13px; font-family: inherit; }
.footer-links a:hover { color: var(--tx2); }