*{box-sizing:border-box}body{margin:0;font:14px Inter,Segoe UI,Arial;background:#f4f7fb;color:#14203c}a{text-decoration:none;color:#1764df}aside{position:fixed;inset:0 auto 0 0;width:245px;background:linear-gradient(#0d1838,#111f45);padding:25px 18px;color:#fff;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:12px;font-size:21px;padding:0 8px 25px}.brand b,.logo{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,#347cf5,#0fc1d7);font-size:17px}.work{padding:15px;border:1px solid #ffffff18;background:#ffffff09;border-radius:14px;margin-bottom:22px}.work small{display:block;color:#8fa0c4;font-size:10px;letter-spacing:1px;margin-bottom:5px}nav{display:grid;gap:6px}nav a,.out{color:#afbad4;padding:12px 14px;border-radius:10px;font-weight:700}nav a.on,nav a:hover{color:#fff;background:linear-gradient(90deg,#1c62df,#2479ed)}.out{margin-top:auto}.app{margin-left:245px}header{height:90px;background:#fff;border-bottom:1px solid #e5eaf2;padding:17px 32px;display:flex;justify-content:space-between;align-items:center}header h1{font-size:22px;margin:7px 0 0}header>div>small{font-size:10px;color:#98a3b8;letter-spacing:1px}.profile{display:flex;gap:12px;align-items:center;text-align:right}.profile span{display:grid;gap:3px}.profile small{color:#7d889f}.profile i{font-style:normal;width:43px;height:43px;border-radius:13px;background:#d7e5ff;color:#1757b7;display:grid;place-items:center;font-weight:900}main{padding:28px 32px}.hero{padding:29px 31px;border-radius:20px;color:#fff;background:radial-gradient(circle at 88% 20%,#24c0db55 0 12%,transparent 29%),linear-gradient(110deg,#1748aa,#1269e7);display:flex;justify-content:space-between;align-items:center;box-shadow:0 15px 35px #125fd12e}.hero small{color:#b7ddff;font-weight:900;letter-spacing:1px}.hero h2{font-size:28px;margin:10px 0 7px}.hero p{margin:0;color:#d9e8ff}.hero a,.empty a{background:#fff;color:#145bd5;padding:12px 16px;border-radius:10px;font-weight:800}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:20px 0}.metrics article{background:#fff;border:1px solid #e5eaf2;border-radius:16px;padding:20px;display:flex;align-items:center;gap:14px;box-shadow:0 12px 30px #1b325f10}.metrics i{width:47px;height:47px;border-radius:13px;background:#e8f0ff;color:#1764df;display:grid;place-items:center;font-style:normal;font-weight:900}.metrics i.yellow{background:#fff3dc;color:#d98b13}.metrics i.green{background:#e5f8ed;color:#15945a}.metrics i.red{background:#ffe7e8;color:#df424a}.metrics small,.head small{font-size:10px;font-weight:900;color:#8c96aa;letter-spacing:.7px}.metrics b{display:block;font-size:24px;margin-top:5px}.card{background:#fff;border:1px solid #e5eaf2;border-radius:18px;box-shadow:0 12px 35px #1b325f12;overflow:hidden}.head{padding:21px 23px;border-bottom:1px solid #e5eaf2;display:flex;justify-content:space-between;align-items:center}.head h2{font-size:18px;margin:4px 0}.head p{color:#77839a;margin:5px 0 0}.head a{font-weight:700}table{width:100%;border-collapse:collapse}th{text-align:left;background:#fafbfe;color:#8b95aa;font-size:10px;letter-spacing:.7px;padding:14px 18px}td{padding:15px 18px;border-top:1px solid #edf0f5;color:#536078}td small{display:block;color:#98a2b4;margin-top:4px}.status,.kind{padding:6px 9px;border-radius:99px;font-size:10px;font-weight:900}.submitted{background:#fff3dd;color:#a76600}.approved{background:#e6f8ed;color:#13824e}.rejected{background:#ffe8e9;color:#bf343a}.kin{background:#e5f8ef;color:#138858}.kout{background:#edf2ff;color:#205cc7}.empty{text-align:center;padding:50px}.empty i{font-style:normal;width:65px;height:65px;border-radius:18px;background:#edf4ff;color:#1764df;display:grid;place-items:center;margin:auto;font-size:26px}.empty h3{margin:15px 0 7px}.empty p{color:#7c879c;margin-bottom:22px}.form{max-width:1100px}.form form{padding:22px;display:grid;gap:18px}.form label{font-size:12px;font-weight:800;color:#5e6980;display:grid;gap:8px}.form input,.form select,.form textarea,.decision textarea{border:1px solid #dfe5ee;background:#fbfcfe;border-radius:10px;padding:12px;font:inherit}.form textarea{min-height:90px}.type{display:grid;grid-template-columns:1fr 1fr;gap:14px}.type label{position:relative;border:1px solid #dfe5ee;border-radius:14px;padding:16px 16px 16px 65px;cursor:pointer}.type input{position:absolute;right:14px;top:14px}.type span{position:absolute;left:15px;top:15px;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:20px}.type .in{background:#e5f8ef;color:#168856}.type .outx{background:#edf2ff;color:#205cca}.type small{color:#939db0;font-weight:400}.line{display:grid;grid-template-columns:2fr .7fr 1.4fr 38px;gap:9px;margin-bottom:9px}.line button{border:0;border-radius:9px;background:#ffe9e9;color:#c73737}.add{justify-self:start;border:0;background:#edf4ff;color:#1764df;border-radius:9px;padding:10px 13px;font-weight:800}.actions{display:flex;justify-content:flex-end;gap:9px;border-top:1px solid #edf0f5;padding-top:18px}.actions a{background:#edf1f7;color:#526078;padding:11px 16px;border-radius:9px;font-weight:700}.actions button,.itemform button,.decision button,.login button{border:0;background:linear-gradient(135deg,#1763e8,#2080ed);color:#fff;padding:11px 16px;border-radius:9px;font-weight:800}.ticket-head{background:#fff;border-radius:18px;padding:23px;margin-bottom:18px;display:flex;justify-content:space-between;align-items:center;border:1px solid #e5eaf2}.ticket-head small{color:#8b96aa;font-weight:900}.ticket-head h2{font-size:25px;margin:6px 0}.ticket-head p{color:#77839a;margin:0}.detail-grid{display:grid;grid-template-columns:1.5fr .7fr;gap:18px}.decision{padding:20px;display:grid;grid-template-columns:1fr auto auto;gap:9px;border-top:1px solid #e5eaf2}.decision .reject{background:#ffe8e9;color:#bd343a}.timeline article{display:grid;grid-template-columns:12px 1fr;gap:12px;padding:15px 22px}.timeline article i{width:10px;height:10px;border-radius:50%;background:#1764df;margin-top:4px}.timeline p{color:#68748b;margin:5px 0}.timeline small{color:#9aa4b5}.grid2{display:grid;grid-template-columns:.7fr 1.3fr;gap:18px}.itemform{display:grid;grid-template-columns:1fr 1fr;gap:11px}.itemform button{grid-column:1/-1}.toast{position:fixed;right:25px;top:105px;background:#14213d;color:#fff;padding:13px 18px;border-radius:10px}.login{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr;background:#fff}.login>section{background:radial-gradient(circle at 18% 82%,#14b8c455 0 8%,transparent 24%),linear-gradient(145deg,#0b1738,#113a82);color:#fff;padding:8vw;display:flex;flex-direction:column;justify-content:center}.login h1{font-size:48px;line-height:1.15;margin:28px 0 18px}.login h1 span{color:#60e1e5}.login section p{color:#c8d7ef;font-size:16px;line-height:1.7;max-width:520px}.login main{width:min(430px,82%);margin:auto;padding:0}.login main>small{color:#1764df;font-weight:900;letter-spacing:1px}.login h2{font-size:30px;margin:13px 0 8px}.login main>p{color:#77839a;margin-bottom:25px}.login form{display:grid;gap:16px}.login label{display:grid;gap:8px;font-size:12px;font-weight:800;color:#5d6880}.login input{padding:14px;border:1px solid #dfe5ee;border-radius:10px}.login em{display:block;background:#f3f6fa;color:#77839a;border-radius:9px;padding:11px;margin-top:18px;font-style:normal}.alert{background:#ffe9e9;color:#bd343a;padding:11px;border-radius:9px;margin-bottom:15px}@media(max-width:950px){.metrics{grid-template-columns:1fr 1fr}.detail-grid,.grid2{grid-template-columns:1fr}}@media(max-width:720px){aside{position:relative;width:100%}.app{margin-left:0}.login{grid-template-columns:1fr}.login>section{display:none}.login main{padding:50px 0}.metrics{grid-template-columns:1fr}.type{grid-template-columns:1fr}.line{grid-template-columns:1fr}.detail-grid{grid-template-columns:1fr}header{padding:15px 18px}main{padding:18px}}.timeline article i.pending{background:#e3a11c}.timeline article i.approved{background:#18a568}.timeline article i.rejected{background:#e0474d}.status.pending{background:#fff3dd;color:#a76600}.itemform select{border:1px solid #dfe5ee;background:#fbfcfe;border-radius:10px;padding:12px;font:inherit}
.bell{position:relative;width:39px;height:39px;border-radius:11px;background:#edf4ff;display:grid;place-items:center}.bell b{position:absolute;right:-5px;top:-5px;background:#e7474e;color:#fff;border-radius:99px;min-width:18px;height:18px;display:grid;place-items:center;font-size:10px}.notify-list{display:grid}.notify{display:grid;grid-template-columns:38px 1fr;gap:12px;padding:16px 22px;border-top:1px solid #edf0f5;color:#536078}.notify.new{background:#f1f6ff}.notify>i{width:36px;height:36px;border-radius:10px;background:#e7f0ff;color:#1764df;display:grid;place-items:center;font-style:normal}.notify p{margin:5px 0}.notify small{color:#99a3b5}.soft,.filter button{border:0;background:#edf4ff;color:#1764df;border-radius:9px;padding:10px 13px;font-weight:800}.filter{display:flex;gap:8px}.filter select{border:1px solid #dfe5ee;border-radius:9px;padding:9px}.level-list{padding:0 22px}.level-list article{display:grid;grid-template-columns:42px 1fr 35px;gap:12px;align-items:center;padding:14px 0;border-top:1px solid #edf0f5}.level-list article>span{width:38px;height:38px;border-radius:50%;background:#1764df;color:#fff;display:grid;place-items:center;font-weight:900}.level-list article div{display:grid;gap:4px}.level-list small{color:#8994a8}.trash{border:0;width:32px;height:32px;border-radius:8px;background:#ffe9e9;color:#bd343a}.flow-note{margin:18px 22px 22px;padding:12px;background:#fff7e6;color:#815a0b;border-radius:9px;font-size:12px}
.monitor-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:18px}.monitor-cards article{background:#fff;border:1px solid #e5eaf2;border-radius:16px;padding:20px;box-shadow:0 12px 30px #1b325f10}.monitor-cards small{color:#8994a9;font-size:10px;font-weight:900}.monitor-cards b{display:block;font-size:21px;margin:8px 0 12px}.monitor-cards div{display:flex;gap:8px}.monitor-cards span{padding:5px 8px;border-radius:99px;font-size:10px;font-weight:800}.monitor-cards .ok{background:#e5f8ed;color:#168552}.monitor-cards .bad{background:#ffe8e9;color:#bd343a}.sla{padding:6px 9px;border-radius:99px;font-size:10px;font-weight:900}.sla.safe{background:#e5f8ed;color:#168552}.sla.warn{background:#fff3dd;color:#a76600}.sla.late{background:#ffe8e9;color:#bd343a}.head-tools{display:flex;gap:9px;align-items:center}.excel{background:#e5f8ed;color:#147a4d;padding:10px 13px;border-radius:9px;font-weight:800}.channel-card{max-width:850px}.channel-form{padding:22px;display:grid;grid-template-columns:1fr 1fr;gap:16px}.channel-form label{display:grid;gap:8px;font-size:12px;font-weight:800;color:#5e6980}.channel-form input{padding:12px;border:1px solid #dfe5ee;border-radius:10px}.channel-form .check{display:flex;align-items:center}.channel-form button{grid-column:1/-1;border:0;background:#1764df;color:#fff;padding:12px;border-radius:10px;font-weight:800}.gateway-note{margin:0 22px 22px;padding:13px;border-radius:10px;background:#edf4ff;color:#415a7c;line-height:1.5}.gateway-note code{background:#fff;padding:2px 4px}@media(max-width:900px){.monitor-cards{grid-template-columns:1fr}.channel-form{grid-template-columns:1fr}.head-tools{align-items:flex-start;flex-direction:column}}