:root{--blue:#1677ff;--blue-dark:#0b5ed7;--blue-soft:#eaf3ff;--green:#16a34a;--orange:#f59e0b;--red:#ef4444;--text:#0f172a;--muted:#64748b;--line:#e5eaf2;--bg:#f6f9fc;--card:#fff;--shadow:0 14px 40px #0f172a14;--radius:16px}*{box-sizing:border-box}body{background-color:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Arial,sans-serif;font-size:14px}#root{min-height:100vh}a{color:var(--blue);text-decoration:none}input,select,textarea,button{font-family:inherit}.app-layout{min-height:100vh;display:flex}.sidebar{border-right:1px solid var(--line);z-index:10;background:#fff;flex-direction:column;gap:18px;width:248px;padding:18px 14px;display:flex;position:fixed;inset:0 auto 0 0}.sidebar .brand{align-items:center;gap:10px;padding:6px 8px;font-size:16px;font-weight:800;display:flex}.sidebar .brand img{width:auto;height:32px}.sidebar .nav{flex-direction:column;gap:4px;display:flex}.sidebar .nav button{text-align:left;color:#475569;cursor:pointer;background:0 0;border:0;border-radius:11px;align-items:center;gap:12px;width:100%;padding:13px 14px;font-family:inherit;font-size:14px;font-weight:600;transition:all .15s;display:flex}.sidebar .nav button:hover,.sidebar .nav button.active{background:var(--blue-soft);color:var(--blue)}.sidebar .nav-icon{color:#64748b;justify-content:center;align-items:center;width:22px;transition:color .15s;display:flex}.sidebar .nav button:hover .nav-icon,.sidebar .nav button.active .nav-icon{color:var(--blue)}.sidebar .user-info{border:1px solid var(--line);border-radius:14px;align-items:center;gap:10px;margin-top:auto;padding:12px;display:flex}.sidebar .user-avatar{color:#1d4ed8;background:linear-gradient(135deg,#dbeafe,#93c5fd);border-radius:50%;flex-shrink:0;place-items:center;width:36px;height:36px;font-size:13px;font-weight:800;display:grid}.sidebar .user-info b{font-size:14px;display:block}.sidebar .user-info .user-role{color:var(--muted);font-size:12px}.sidebar .logout-btn{color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:6px;margin-left:auto;padding:4px;font-size:16px;transition:all .15s}.sidebar .logout-btn:hover{color:var(--red);background:#fef2f2}.main-area{flex-direction:column;width:calc(100% - 248px);min-height:100vh;margin-left:248px;display:flex}.topbar{border-bottom:1px solid var(--line);z-index:5;background:#fff;justify-content:space-between;align-items:center;height:64px;padding:0 28px;display:flex;position:sticky;top:0}.topbar .page-title{color:var(--muted);font-size:16px;font-weight:700}.topbar .topbar-right{align-items:center;gap:12px;display:flex}.topbar .bell,.topbar .settings-icon{cursor:pointer;color:var(--muted);border-radius:50%;justify-content:center;align-items:center;width:38px;height:38px;transition:all .2s;display:flex;position:relative}.topbar .bell:hover,.topbar .settings-icon:hover{background:var(--bg);color:var(--text)}.topbar .bell-count{background:var(--red);color:#fff;border:2px solid #fff;border-radius:9999px;padding:1px 4px;font-size:9px;font-weight:800;line-height:1;position:absolute;top:3px;right:3px;box-shadow:0 2px 4px #ef444440}.dropdown-menu{border:1px solid var(--line);z-index:100;transform-origin:100% 0;background:#fff;border-radius:12px;animation:.2s cubic-bezier(.16,1,.3,1) forwards dropdownFadeIn;position:absolute;top:calc(100% + 8px);right:0;overflow:hidden;box-shadow:0 10px 25px -5px #0f172a1a,0 8px 10px -6px #0f172a1a}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(8px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}.notif-dropdown{width:360px}.notif-dropdown .dropdown-header{border-bottom:1px solid var(--line);background:#f8fafc;justify-content:space-between;align-items:center;padding:14px 16px;display:flex}.notif-dropdown .dropdown-header h4{color:var(--text);margin:0;font-size:14px;font-weight:700}.unread-badge{background:var(--blue-soft);color:var(--blue);border-radius:9999px;padding:2px 8px;font-size:11px;font-weight:600}.notif-list{max-height:280px;overflow-y:auto}.notif-item{cursor:pointer;border-bottom:1px solid #e5eaf280;align-items:flex-start;gap:12px;padding:14px 16px;transition:background .15s;display:flex}.notif-item:hover{background:var(--bg)}.notif-item:last-child{border-bottom:none}.notif-dot{background:var(--blue);width:8px;height:8px;box-shadow:0 0 0 2px var(--blue-soft);border-radius:50%;flex-shrink:0;margin-top:5px}.notif-content{flex-direction:column;gap:3px;display:flex}.notif-title{color:var(--text);font-size:13px;font-weight:600}.notif-text{color:var(--muted);font-size:12px;line-height:1.45}.notif-dropdown .dropdown-footer{text-align:center;color:var(--blue);cursor:pointer;border-top:1px solid var(--line);background:#f8fafc;padding:12px;font-size:13px;font-weight:600;transition:all .15s}.notif-dropdown .dropdown-footer:hover{background:var(--blue-soft);color:var(--blue-dark)}.settings-dropdown{width:200px;padding:6px}.settings-item{color:#475569;cursor:pointer;border-radius:8px;align-items:center;gap:10px;padding:10px 12px;font-size:13px;font-weight:550;transition:all .15s;display:flex}.settings-item:hover{background:var(--blue-soft);color:var(--blue)}.settings-item svg{color:#64748b;transition:color .15s}.settings-item:hover svg{color:var(--blue)}.settings-item.danger,.settings-item.danger svg{color:var(--red)}.settings-item.danger:hover{color:var(--red);background:#fef2f2}.settings-item.danger:hover svg{color:var(--red)}.content-area{flex:1;padding:26px 32px 40px}.toast-notification{border:1px solid var(--line);border-left:4px solid var(--blue);z-index:100;background:#fff;border-radius:12px;max-width:400px;padding:16px 24px;animation:.3s ease-out forwards slideInRight;position:fixed;bottom:20px;right:20px;box-shadow:0 20px 60px #0f172a26}.toast-notification strong{color:var(--blue)}@keyframes slideInRight{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@media (width<=900px){.sidebar{width:200px}.main-area{width:calc(100% - 200px);margin-left:200px}.content-area{padding:20px}}.login-page{box-sizing:border-box;color:#0f172a;background:radial-gradient(circle at 10% 10%,#1677ff21,#0000 30%),radial-gradient(circle at 90% 20%,#2dd4bf1f,#0000 30%),linear-gradient(135deg,#f8fbff 0%,#eef6ff 50%,#f9fbff 100%);grid-template-columns:auto auto;justify-content:center;align-items:center;gap:80px;height:100vh;padding:0 42px;display:grid;position:relative;overflow:hidden}.login-page .bg-grid{pointer-events:none;background-image:linear-gradient(#0f172a0a 1px,#0000 1px),linear-gradient(90deg,#0f172a0a 1px,#0000 1px);background-size:48px 48px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(90deg,#000,#0000 85%);mask-image:linear-gradient(90deg,#000,#0000 85%)}.login-page .brand{z-index:2;align-items:center;gap:12px;font-size:20px;font-weight:800;display:flex;position:absolute;top:28px;left:42px}.login-page .brand img{width:auto;height:38px}.login-page .hero{z-index:1;max-width:760px;padding:0 32px 0 10px;position:relative}.login-page .kicker{color:#1d4ed8;background:#fff;border:1px solid #e5eaf2;border-radius:999px;align-items:center;gap:8px;padding:8px 12px;font-size:13px;font-weight:800;display:inline-flex;box-shadow:0 10px 24px #0f172a0f}.login-page h1{letter-spacing:-1.2px;margin:16px 0;font-size:44px;line-height:1.1}.login-page .blue{color:#1677ff}.login-page .sub{color:#475569;max-width:610px;margin:0;font-size:17px;line-height:1.7}.login-page .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:640px;margin-top:20px;display:grid}.login-page .feature{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffffc7;border:1px solid #e5eaf2;border-radius:18px;padding:12px 14px;box-shadow:0 14px 34px #0f172a0f}.login-page .feature b{margin-bottom:7px;display:block}.login-page .feature span{color:#64748b;font-size:13px;line-height:1.5}.login-page .ico{color:#1677ff;background:#eaf3ff;border-radius:10px;place-items:center;width:32px;height:32px;margin-bottom:8px;font-size:16px;display:grid}.login-page .preview{background:#fff;border:1px solid #e5eaf2;border-radius:20px;max-width:650px;margin-top:20px;padding:14px;box-shadow:0 24px 70px #0f172a1f}.login-page .preview-head{justify-content:space-between;align-items:center;margin-bottom:14px;display:flex}.login-page .dots{gap:6px;display:flex}.login-page .dots i{background:#cbd5e1;border-radius:50%;width:9px;height:9px;display:block}.login-page .ticket{background:#fbfdff;border:1px solid #edf2f7;border-radius:14px;grid-template-columns:1fr 120px 100px;align-items:center;gap:10px;margin-top:8px;padding:10px;display:grid}.login-page .ticket b{font-size:13px}.login-page .ticket small{color:#64748b;margin-top:3px;display:block}.login-page .badge{text-align:center;border-radius:10px;padding:7px 10px;font-size:12px;font-weight:800;display:inline-block}.login-card{z-index:1;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#ffffffe6;border:1px solid #e2e8f0f2;border-radius:28px;justify-self:center;width:100%;max-width:480px;padding:30px;position:relative;box-shadow:0 24px 70px #0f172a1f}.login-card h2{margin:0 0 8px;font-size:28px}.login-card .desc{color:#64748b;margin:0 0 26px;line-height:1.55}.login-card .field{margin-bottom:16px}.login-card .field label{color:#334155;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:13px;font-weight:800;display:flex}.login-card .input-wrap{position:relative}.login-card .input-wrap .input-icon{color:#94a3b8;font-size:16px;position:absolute;top:50%;left:14px;transform:translateY(-50%)}.login-card .input-wrap input{background:#fff;border:1px solid #e5eaf2;border-radius:14px;outline:none;width:100%;height:50px;padding:0 44px;font-family:inherit;font-size:14px;transition:all .18s}.login-card .input-wrap input:focus{border-color:#1677ff;box-shadow:0 0 0 4px #1677ff1a}.login-card .toggle-btn{color:#475569;cursor:pointer;background:#f1f5f9;border:0;border-radius:9px;padding:6px 8px;font-size:12px;font-weight:700;position:absolute;top:50%;right:12px;transform:translateY(-50%)}.login-card .row{color:#475569;justify-content:space-between;align-items:center;margin:8px 0 22px;font-size:13px;display:flex}.login-card .remember{align-items:center;gap:8px;display:flex}.login-card .remember input[type=checkbox]{accent-color:#1677ff;width:16px;height:16px}.login-card .link{color:#1677ff;font-weight:800;text-decoration:none}.login-card .btn-login{color:#fff;cursor:pointer;background:linear-gradient(135deg,#1677ff,#4096ff);border:0;border-radius:15px;width:100%;height:52px;font-size:15px;font-weight:900;transition:all .18s;box-shadow:0 16px 26px #1677ff3d}.login-card .btn-login:hover{transform:translateY(-1px);box-shadow:0 20px 34px #1677ff47}.login-card .divider{color:#94a3b8;align-items:center;gap:12px;margin:22px 0;font-size:12px;display:flex}.login-card .divider:before,.login-card .divider:after{content:"";background:#e5eaf2;flex:1;height:1px}.login-card .sso{grid-template-columns:1fr 1fr;gap:12px;display:grid}.login-card .sso button{color:#334155;cursor:pointer;background:#fff;border:1px solid #e5eaf2;border-radius:13px;height:44px;font-weight:800;transition:all .15s}.login-card .sso button:hover{background:#f8fafc;border-color:#cbd5e1}.login-card .support-box{background:#eff6ff;border:1px solid #dbeafe;border-radius:16px;align-items:flex-start;gap:12px;margin-top:22px;padding:14px;display:flex}.login-card .support-box .support-icon{background:#fff;border-radius:11px;flex-shrink:0;place-items:center;width:34px;height:34px;display:grid}.login-card .support-box b{color:#1e40af;margin-bottom:4px;display:block}.login-card .support-box span{color:#475569;font-size:13px;line-height:1.45}.login-card .secure{color:#64748b;justify-content:center;align-items:center;gap:8px;margin-top:20px;font-size:12px;display:flex}.login-page .footer{color:#64748b;z-index:2;font-size:12px;position:absolute;bottom:18px;left:42px}.login-error{color:#dc2626;text-align:center;background:#fef2f2;border:1px solid #fecaca;border-radius:10px;margin-bottom:16px;padding:10px 14px;font-size:13px}@media (width<=1050px){.login-page{grid-template-columns:1fr;padding:88px 22px 30px}.login-page .hero{padding:0}.login-card{justify-self:start;max-width:560px}.login-page .feature-grid{grid-template-columns:1fr}.login-page .preview{display:none}.login-page h1{font-size:40px}.login-page .footer{padding:0 22px 22px;position:static}.login-page .brand{left:22px}}@media (width<=560px){.login-card{border-radius:22px;padding:24px}.login-card .sso,.login-page .ticket{grid-template-columns:1fr}.login-page .brand{font-size:17px}.login-page h1{font-size:34px}}.title-row{justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:20px;display:flex}.title-row h1{margin:0 0 6px;font-size:28px;font-weight:800}.table-wrap tr.highlight-red td{background-color:#fee2e2}.table-wrap tr.highlight-red:hover td{background-color:#fecaca}.table-wrap tr.highlight-yellow td{background-color:#fef3c7}.table-wrap tr.highlight-yellow:hover td{background-color:#fde68a}.title-row .sub{color:var(--muted);margin:0}.actions{flex-wrap:wrap;flex-shrink:0;gap:10px;display:flex}.btn{border:1px solid var(--line);cursor:pointer;color:#334155;background:#fff;border-radius:10px;align-items:center;gap:6px;padding:10px 14px;font-family:inherit;font-size:13px;font-weight:700;transition:all .15s;display:inline-flex}.btn:hover{background:#f8fafc;border-color:#cbd5e1}.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 8px 18px #1677ff38}.btn.primary:hover{background:var(--blue-dark)}.btn.green{color:#fff;background:#16a34a;border-color:#16a34a}.btn.green:hover{background:#15803d}.btn.orange{color:#c2410c;background:#fff7ed;border-color:#fed7aa}.mini-btn{border:1px solid var(--line);cursor:pointer;color:#475569;background:#fff;border-radius:8px;padding:7px 9px;font-family:inherit;font-size:12px;font-weight:600;transition:all .15s}.mini-btn:hover{background:var(--blue-soft);color:var(--blue);border-color:#bfdbfe}.icon-btn{border:1px solid var(--line);cursor:pointer;background:#fff;border-radius:8px;justify-content:center;align-items:center;width:32px;height:32px;font-size:14px;transition:all .2s cubic-bezier(.4,0,.2,1);display:inline-flex}.icon-btn:hover{background:var(--blue-soft);color:var(--blue);border-color:#bfdbfe;transform:translateY(-1px);box-shadow:0 4px 12px #1677ff14}.icon-btn:active{background:#e0f2fe;transform:translateY(0)}.select-action{border:1px solid var(--line);color:#475569;cursor:pointer;background:#fff;border-radius:8px;outline:none;height:32px;padding:0 10px;font-size:13px;font-weight:600;transition:all .2s}.select-action:hover{background:var(--blue-soft);color:var(--blue);border-color:#bfdbfe;transform:translateY(-1px);box-shadow:0 4px 12px #1677ff14}.select-action:active{background:#e0f2fe;transform:translateY(0)}.select-action:focus{border-color:var(--blue);box-shadow:0 0 0 3px #1677ff14}.grid{gap:16px;display:grid}.stats{grid-template-columns:repeat(5,minmax(150px,1fr));margin-bottom:18px}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.stat{justify-content:space-between;align-items:center;padding:18px;display:flex}.stat .label{color:#475569;font-size:13px;font-weight:600}.stat .num{margin-top:6px;font-size:26px;font-weight:800}.ico{background:var(--blue-soft);width:44px;height:44px;color:var(--blue);border-radius:13px;flex-shrink:0;place-items:center;font-size:22px;display:grid}.ico.orange{color:#f59e0b;background:#fff7ed}.ico.green{color:#16a34a;background:#dcfce7}.ico.purple{color:#7c3aed;background:#f3e8ff}.panel{padding:18px}.panel h3{margin:0 0 14px;font-size:16px}.overview-grid{grid-template-columns:2fr 1fr}.quick-grid{grid-template-columns:repeat(4,1fr)}.metric{border:1px solid var(--line);color:#475569;background:#fbfdff;border-radius:14px;padding:18px;font-size:13px}.metric b{color:var(--text);margin-top:8px;font-size:24px;display:block}.progress{background:#e2e8f0;border-radius:99px;height:9px;margin-top:12px;overflow:hidden}.progress span{background:var(--blue);border-radius:99px;height:100%;transition:width .5s;display:block}.table-wrap{overflow:auto}table{border-collapse:collapse;width:100%;min-width:800px}th,td{text-align:left;border-bottom:1px solid var(--line);vertical-align:middle;padding:13px 14px}.table-wrap tbody tr{transition:background-color .2s}.table-wrap tbody tr:hover{background-color:#f1f5f9}.table-wrap tbody tr.selected{border-left:3px solid var(--blue);background-color:#e2e8f0!important}th{color:#475569;text-transform:uppercase;letter-spacing:.02em;background:#fbfdff;font-size:12px;font-weight:800}td{font-size:13px}.link-text{color:var(--blue);cursor:pointer;font-weight:800}.muted{color:var(--muted);font-size:12px}.badge{border-radius:8px;padding:6px 10px;font-size:12px;font-weight:800;display:inline-block}.badge.pending{color:#c2410c;background:#fff7ed;border:1px solid #fed7aa}.badge.doing{color:#1d4ed8;background:#eff6ff;border:1px solid #bfdbfe}.badge.done{color:#15803d;background:#dcfce7;border:1px solid #bbf7d0}.tabs{border-bottom:1px solid var(--line);gap:22px;padding:0 18px;display:flex}.tab{color:#475569;cursor:pointer;background:0 0;border:0;border-bottom:3px solid #0000;padding:16px 8px 14px;font-family:inherit;font-size:14px;font-weight:700;transition:all .15s}.tab:hover{color:var(--blue)}.tab.active{color:var(--blue);border-bottom-color:var(--blue)}.filter{border-bottom:1px solid var(--line);gap:10px;padding:16px 18px;display:flex}.input{box-sizing:border-box;border:1px solid var(--line);background:#fff;border-radius:10px;outline:none;width:100%;padding:11px 12px;font-family:inherit;font-size:13px;transition:all .15s}.input:focus{border-color:var(--blue);box-shadow:0 0 0 3px #1677ff14}.filter .input{flex:1}.split{grid-template-columns:minmax(0,1fr) 410px;gap:0;display:grid}.detail-panel{border-left:1px solid var(--line);background:#fff;padding:20px}.detail-panel h3{justify-content:space-between;align-items:center;margin:0 0 14px;font-size:19px;display:flex}.detail-panel h4{color:#334155;margin:18px 0 10px;font-size:14px}.close-btn{cursor:pointer;color:var(--muted);background:0 0;border:none;padding:0;font-size:20px}.kv{grid-template-columns:120px 1fr;gap:10px;margin:9px 0;font-size:13px;display:grid}.kv span:first-child{color:#64748b}.copy-text{color:var(--blue);cursor:pointer;font-weight:800}.timeline{border-left:2px solid #dbeafe;margin:18px 0 0 8px;padding-left:20px}.timeitem{margin-bottom:18px;font-size:13px;position:relative}.timeitem:before{content:"";background:var(--blue);border-radius:50%;width:10px;height:10px;position:absolute;top:3px;left:-27px}.timeitem .time-label{color:var(--muted);margin-top:4px;font-size:11px;display:block}.footer-actions{gap:10px;margin-top:20px;display:flex}.pagination{justify-content:space-between;align-items:center;padding:14px 18px;display:flex}.pages{gap:6px;display:flex}.pages button{border:1px solid var(--line);cursor:pointer;background:#fff;border-radius:8px;width:34px;height:34px;font-family:inherit;font-weight:700;transition:all .15s}.pages button:hover{background:var(--blue-soft);color:var(--blue)}.pages button.active{background:var(--blue);color:#fff;border-color:var(--blue)}.avatar-line{align-items:center;gap:8px;display:flex}.small-av{color:#6d28d9;background:#ede9fe;border-radius:50%;flex-shrink:0;place-items:center;width:28px;height:28px;font-size:11px;font-weight:800;display:grid}.note-text{color:#475569;max-width:180px;font-size:12px;line-height:1.4}.list{gap:10px;display:grid}.list-row{border:1px solid var(--line);background:#fff;border-radius:12px;justify-content:space-between;align-items:center;padding:12px;font-size:13px;display:flex}.chart{border:1px solid var(--line);background:#fbfdff;border-radius:14px;align-items:flex-end;gap:12px;height:230px;padding:18px;display:flex}.bar{background:linear-gradient(#60a5fa,#1677ff);border-radius:9px 9px 0 0;flex:1;min-height:28px;transition:height .4s;position:relative}.bar em{color:#64748b;font-size:11px;font-style:normal;position:absolute;bottom:-25px;left:50%;transform:translate(-50%)}.form-grid{grid-template-columns:repeat(2,1fr);gap:14px;display:grid}.field label{color:#334155;margin-bottom:7px;font-size:13px;font-weight:700;display:block}.field input,.field select,.field textarea{border:1px solid var(--line);background:#fff;border-radius:10px;outline:none;width:100%;padding:11px;font-family:inherit;font-size:13px;transition:all .15s}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px #1677ff14}.field textarea{resize:vertical;min-height:86px}.report-grid{grid-template-columns:repeat(2,1fr)}.perm{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.perm>div{border:1px solid var(--line);background:#fbfdff;border-radius:12px;padding:14px}.perm>div b{margin-bottom:6px;display:block}@media (width<=1200px){.split{grid-template-columns:1fr}.detail-panel{border-left:0;border-top:1px solid var(--line)}.stats{grid-template-columns:repeat(3,1fr)}.overview-grid,.report-grid{grid-template-columns:1fr}.quick-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=768px){.stats{grid-template-columns:repeat(2,1fr)}.form-grid,.perm{grid-template-columns:1fr}.title-row{flex-direction:column}}