:root{--navy:#0b1628;--navy2:#112040;--navy3:#1a2f54;--accent:#2f7bff;--accent-light:#eff6ff;--surface:#fff;--surface2:#f5f7fa;--surface3:#eef1f6;--border:#e2e8f0;--text1:#0f172a;--text2:#475569;--text3:#94a3b8;--green:#10b981;--amber:#f59e0b;--red:#ef4444;--purple:#8b5cf6;--sidebar-w:220px}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--surface2);color:var(--text1);min-height:100vh;font-family:Plus Jakarta Sans,sans-serif;font-size:14px;display:flex}#root{width:100%;min-height:100vh;display:flex}.sidebar{width:var(--sidebar-w);background:var(--navy);z-index:100;flex-direction:column;min-height:100vh;display:flex;position:fixed;top:0;left:0}.logo-area{border-bottom:1px solid #ffffff12;padding:22px 20px 18px}.logo{color:#fff;letter-spacing:-.5px;font-family:Plus Jakarta Sans,sans-serif;font-size:19px;font-weight:700}.logo span{color:var(--accent)}.logo-tag{color:#ffffff4d;margin-top:2px;font-size:10px}.user-card{background:#ffffff0f;border:1px solid #ffffff1a;border-radius:10px;align-items:center;gap:10px;margin:14px 16px;padding:12px;display:flex}.user-av{color:#fff;background:linear-gradient(135deg,#2f7bff,#8b5cf6);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:38px;height:38px;font-size:14px;font-weight:700;display:flex}.user-name{color:#fff;font-size:13px;font-weight:600}.user-dept{color:#fff6;margin-top:1px;font-size:11px}.user-progress{border-top:1px solid #ffffff14;margin-top:8px;padding-top:8px}.up-label{color:#fff6;justify-content:space-between;margin-bottom:5px;font-size:10px;display:flex}.up-bar{background:#ffffff1a;border-radius:99px;height:4px;overflow:hidden}.up-fill{background:var(--accent);border-radius:99px;height:100%}nav{flex:1;padding:8px 0}.nav-section{letter-spacing:.09em;text-transform:uppercase;color:#fff3;padding:12px 20px 5px;font-size:10px;font-weight:600}.nav-item{color:#ffffff80;cursor:pointer;border-left:3px solid #0000;border-radius:0 6px 6px 0;align-items:center;gap:10px;margin-right:10px;padding:9px 20px;font-size:13px;text-decoration:none;transition:all .15s;display:flex}.nav-item:hover{color:#fff;background:#ffffff12}.nav-item.active{color:#fff;border-left-color:var(--accent);background:#2f7bff26}.nav-item svg{flex-shrink:0;width:16px;height:16px}.nav-badge{background:var(--red);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:18px;height:18px;margin-left:auto;font-size:10px;font-weight:700;display:flex}.sidebar-bot{border-top:1px solid #ffffff12;padding:14px 20px}.company-badge{color:#ffffff59;align-items:center;gap:8px;font-size:11px;display:flex}.company-badge svg{width:14px;height:14px}.main{margin-left:var(--sidebar-w);flex-direction:column;flex:1;min-width:0;display:flex}.topbar{background:var(--surface);border-bottom:1px solid var(--border);z-index:50;justify-content:space-between;align-items:center;height:58px;padding:0 28px;display:flex;position:sticky;top:0}.greeting{color:var(--text1);font-family:Plus Jakarta Sans,sans-serif;font-size:15px;font-weight:600}.greeting-sub{color:var(--text3);margin-top:1px;font-size:12px}.topbar-right{align-items:center;gap:10px;display:flex}.tb-btn{border:1px solid var(--border);background:var(--surface);cursor:pointer;width:36px;height:36px;color:var(--text2);border-radius:8px;justify-content:center;align-items:center;display:flex;position:relative}.tb-btn svg{width:16px;height:16px}.notif-dot{background:var(--red);border:1.5px solid #fff;border-radius:50%;width:7px;height:7px;position:absolute;top:6px;right:6px}.streak-pill{color:#b45309;background:#fffbeb;border:1px solid #fde68a;border-radius:99px;align-items:center;gap:5px;padding:5px 12px;font-size:12px;font-weight:600;display:flex}.content{flex:1;padding:22px 28px}.hero-bar{background:var(--navy);border-radius:14px;align-items:center;gap:28px;margin-bottom:20px;padding:22px 28px;display:flex;position:relative;overflow:hidden}.hero-bar:before{content:"";background:#2f7bff14;border-radius:50%;width:200px;height:200px;position:absolute;top:-40px;right:-40px}.hero-ring{flex-shrink:0;position:relative}.ring-svg{width:90px;height:90px;transform:rotate(-90deg)}.ring-bg{fill:none;stroke:#ffffff1a;stroke-width:8px}.ring-fill{fill:none;stroke:var(--accent);stroke-width:8px;stroke-linecap:round;stroke-dasharray:220;transition:stroke-dashoffset 1s}.ring-label{flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.ring-pct{color:#fff;font-family:Plus Jakarta Sans,sans-serif;font-size:20px;font-weight:700}.ring-sub{color:#fff6;margin-top:1px;font-size:9px}.hero-info{flex:1}.hero-title{color:#fff;margin-bottom:4px;font-family:Plus Jakarta Sans,sans-serif;font-size:17px;font-weight:600}.hero-sub{color:#ffffff80;margin-bottom:14px;font-size:13px}.hero-pills{flex-wrap:wrap;gap:10px;display:flex}.h-pill{color:#ffffffb3;background:#ffffff12;border:1px solid #ffffff1a;border-radius:8px;align-items:center;gap:6px;padding:7px 12px;font-size:12px;display:flex}.h-pill strong{color:#fff;font-weight:600}.h-pill svg{width:14px;height:14px}.stats-row{grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px;display:grid}@media (width<=900px){.stats-row{grid-template-columns:repeat(2,1fr)}.grid2,.grid3{grid-template-columns:1fr!important}}.stat-mini{background:var(--surface);border:1px solid var(--border);border-radius:10px;align-items:center;gap:12px;padding:14px 16px;display:flex}.stat-ic{border-radius:9px;flex-shrink:0;justify-content:center;align-items:center;width:38px;height:38px;display:flex}.stat-ic svg{width:18px;height:18px}.stat-ic.blue{color:var(--accent);background:#eff6ff}.stat-ic.green{color:var(--green);background:#f0fdf4}.stat-ic.amber{color:var(--amber);background:#fffbeb}.stat-ic.purple{color:var(--purple);background:#f5f3ff}.s-val{color:var(--text1);font-family:Plus Jakarta Sans,sans-serif;font-size:20px;font-weight:700}.s-lbl{color:var(--text3);margin-top:1px;font-size:11px}.grid2{grid-template-columns:1fr 320px;gap:16px;margin-bottom:16px;display:grid}.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden}.card-head{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:15px 20px;display:flex}.card-title{color:var(--text1);font-family:Plus Jakarta Sans,sans-serif;font-size:14px;font-weight:600}.card-link{color:var(--accent);cursor:pointer;font-size:12px;font-weight:500;text-decoration:none}.sop-item{border-bottom:1px solid var(--border);cursor:pointer;align-items:center;gap:14px;padding:13px 20px;text-decoration:none;transition:background .12s;display:flex}.sop-item:hover{background:var(--surface2)}.sop-item:last-child{border-bottom:none}.sop-thumb{border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:72px;height:46px;display:flex;position:relative;overflow:hidden}.sop-thumb .play-ic{background:#fff3;border-radius:50%;justify-content:center;align-items:center;width:26px;height:26px;display:flex}.sop-thumb .play-ic svg{color:#fff;width:12px;height:12px;margin-left:2px}.sop-done-overlay{background:#10b9818c;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.sop-done-overlay svg{color:#fff;width:22px;height:22px}.sop-info{flex:1;min-width:0}.sop-title{color:var(--text1);white-space:nowrap;text-overflow:ellipsis;margin-bottom:3px;font-size:13px;font-weight:500;overflow:hidden}.sop-meta{align-items:center;gap:8px;margin-bottom:5px;display:flex}.dept-tag{border-radius:99px;padding:2px 7px;font-size:10px;font-weight:600}.dt-sales{color:#1d4ed8;background:#dbeafe}.dt-hrd{color:#15803d;background:#dcfce7}.dt-ops{color:#b45309;background:#fef3c7}.dt-fin{color:#6d28d9;background:#ede9fe}.dt-cs{color:#0e7490;background:#cffafe}.dt-it{color:#9d174d;background:#fce7f3}.sop-dur{color:var(--text3);font-size:11px}.sop-prog{align-items:center;gap:8px;display:flex}.prog-bar{background:var(--surface3);border-radius:99px;flex:1;height:4px;overflow:hidden}.prog-fill{border-radius:99px;height:100%}.prog-pct{color:var(--text3);text-align:right;min-width:26px;font-size:11px}.sop-status{flex-shrink:0}.status-pill{border-radius:99px;padding:3px 9px;font-size:10px;font-weight:600}.sp-done{color:#15803d;background:#dcfce7}.sp-ongoing{color:#1d4ed8;background:#dbeafe}.sp-new{color:#b45309;background:#fef3c7}.sp-deadline{color:#b91c1c;background:#fee2e2}.cert-item{border-bottom:1px solid var(--border);cursor:pointer;align-items:center;gap:12px;padding:11px 20px;transition:background .12s;display:flex}.cert-item:hover{background:var(--surface2)}.cert-item:last-child{border-bottom:none}.cert-ic{border-radius:9px;flex-shrink:0;justify-content:center;align-items:center;width:38px;height:38px;display:flex}.cert-ic svg{width:20px;height:20px}.cert-name{color:var(--text1);font-size:13px;font-weight:500}.cert-date{color:var(--text3);margin-top:1px;font-size:11px}.cert-dl{border:1px solid var(--border);background:var(--surface2);width:30px;height:30px;color:var(--text3);border-radius:7px;flex-shrink:0;justify-content:center;align-items:center;margin-left:auto;display:flex}.cert-dl svg{width:14px;height:14px}.deadline-item{border-bottom:1px solid var(--border);align-items:center;gap:12px;padding:10px 20px;display:flex}.deadline-item:last-child{border-bottom:none}.dl-dot{border-radius:50%;flex-shrink:0;width:9px;height:9px}.dl-title{color:var(--text1);flex:1;font-size:13px;font-weight:500}.dl-date{border-radius:6px;padding:3px 8px;font-size:11px;font-weight:600}.dl-urgent{color:#b91c1c;background:#fee2e2}.dl-soon{color:#b45309;background:#fef3c7}.dl-ok{color:#15803d;background:#dcfce7}.grid3{grid-template-columns:1fr 1fr 1fr;gap:14px;display:grid}.explore-item{border-bottom:1px solid var(--border);cursor:pointer;align-items:center;gap:12px;padding:10px 20px;transition:background .12s;display:flex}.explore-item:hover{background:var(--surface2)}.explore-item:last-child{border-bottom:none}.exp-thumb{border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;width:52px;height:34px;display:flex}.exp-thumb svg{color:#fff9;width:14px;height:14px}.exp-title{color:var(--text1);font-size:12px;font-weight:500}.exp-dur{color:var(--text3);margin-top:1px;font-size:11px}.rank-item{border-bottom:1px solid var(--border);align-items:center;gap:10px;padding:9px 20px;display:flex}.rank-item:last-child{border-bottom:none}.rank-num{width:20px;color:var(--text3);text-align:center;font-size:12px;font-weight:600}.rank-av{color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:30px;height:30px;font-size:11px;font-weight:600;display:flex}.rank-name{color:var(--text1);flex:1;font-size:12px;font-weight:500}.rank-you{color:#1d4ed8;background:#dbeafe;border-radius:99px;padding:1px 6px;font-size:10px;font-weight:600}.rank-score{color:var(--accent);font-size:12px;font-weight:600}.rank-item.me{background:#f0f7ff}.btn-sync{background:var(--navy2);color:#fff;cursor:pointer;border:1px solid #fff3;border-radius:6px;align-items:center;gap:6px;padding:6px 12px;font-size:11px;font-weight:600;transition:all .2s;display:flex}.btn-sync:hover{background:var(--navy3);border-color:#fff6}.sync-panel-modal{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9999;background:#0f172a99;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:fixed;top:0;left:0}.sync-panel-card{background:#fff;border-radius:12px;width:600px;max-width:90vw;padding:24px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.sync-textarea{border:1px solid var(--border);resize:vertical;background:#f8fafc;border-radius:8px;width:100%;height:180px;margin-top:8px;margin-bottom:16px;padding:12px;font-family:monospace;font-size:11px}.btn-primary{background:var(--navy);color:#fff;border:1px solid var(--navy);cursor:pointer;border-radius:6px;padding:8px 16px;font-size:13px;font-weight:600}.btn-primary:hover{background:#000}.btn-sec{color:var(--text2);border:1px solid var(--border);cursor:pointer;background:#fff;border-radius:6px;padding:8px 16px;font-size:13px}.btn-sec:hover{background:var(--surface2)}.wizard-modal{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:1000;background:#0f172aa6;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:fixed;top:0;left:0}.wizard-card{background:#fff;border-radius:16px;flex-direction:column;width:850px;max-width:95vw;height:85vh;max-height:600px;display:flex;overflow:hidden;box-shadow:0 25px 50px -12px #00000040}.form-input{border:1px solid var(--border);width:100%;color:var(--text1);background:#fff;border-radius:6px;padding:10px 12px;font-size:13px}.form-input:focus{border-color:var(--accent);outline:none}.form-select{border:1px solid var(--border);background:#fff;border-radius:6px;width:100%;padding:10px 12px;font-size:13px}@media print{body *{visibility:hidden}.print-area,.print-area *{visibility:visible}.print-area{width:100%;position:absolute;top:0;left:0}}