:root{--orange: #F27C1F;--orange-soft: #FFB25E;--orange-dark: #D96500;--orange-tint: #FFF3E5;--blue: #2C51A5;--blue-soft: #5479CB;--blue-dark: #1E3E82;--blue-tint: #EEF2FB;--red: #D32F2F;--red-tint: #FDECEC;--green: #16A34A;--green-tint: #E6F7EC;--purple: #6366F1;--purple-tint: #EEF0FF;--bg: #F5F7FB;--panel: #FFFFFF;--sidebar: linear-gradient(180deg, #EAF2FE 0%, #F5FAFF 55%, #FFF3E5 100%);--border: #E7ECF3;--border-strong: #D5DEEB;--text: #0E1A2B;--text-2: #46536B;--muted: #7A8699;--shadow-xs: 0 1px 2px rgba(15, 23, 42, .05);--shadow-sm: 0 2px 8px rgba(15, 23, 42, .05);--shadow-md: 0 10px 24px rgba(15, 23, 42, .08);--shadow-lg: 0 20px 45px rgba(46, 82, 168, .15);--radius: 16px;--radius-sm: 10px}*,*:before,*:after{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:Plus Jakarta Sans,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}button{font-family:inherit}@keyframes fadeUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes barSlide{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes floatUp{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.splash{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;background:linear-gradient(135deg,#fff7ec,#f5faff 60%,#eaf2fe);display:flex;align-items:center;justify-content:center;transition:opacity .4s ease}.splash.fade-out{opacity:0;pointer-events:none}.splash-inner{text-align:center;animation:fadeIn .4s ease}.splash-logo{display:inline-flex;padding:16px;background:#fff;border-radius:24px;box-shadow:var(--shadow-lg);animation:floatUp 2.4s ease-in-out infinite}.splash-name{font-size:32px;font-weight:800;letter-spacing:-.02em;margin-top:22px;background:linear-gradient(90deg,var(--orange),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}.splash-sub{color:var(--muted);font-size:13px;margin-top:4px;font-weight:500}.splash-bar{width:220px;height:4px;margin:22px auto 0;background:#2e52a81f;border-radius:2px;overflow:hidden;position:relative}.splash-bar>div{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,transparent,var(--orange),var(--blue),transparent);animation:barSlide 1.4s ease-in-out infinite}.splash-tag{color:var(--muted);font-size:12px;margin-top:12px}.app{display:grid;grid-template-columns:260px 1fr;min-height:100vh}.sidebar{background:var(--sidebar);border-right:1px solid var(--border);padding:22px 16px;display:flex;flex-direction:column;gap:6px;position:sticky;top:0;height:100vh}.brand{display:flex;align-items:center;gap:12px;padding:6px 8px 22px}.brand img{width:44px;height:44px;background:#fff;border-radius:12px;padding:4px;box-shadow:var(--shadow-xs);transition:transform .2s ease}.brand:hover img{transform:rotate(-6deg) scale(1.05)}.brand-name{font-weight:800;font-size:18px;letter-spacing:-.02em;background:linear-gradient(90deg,var(--orange),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}.brand-sub{font-size:10.5px;color:var(--muted);font-weight:600;letter-spacing:.04em;text-transform:uppercase}.section-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);padding:16px 12px 6px;font-weight:700}.nav-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius-sm);color:var(--text-2);font-weight:500;font-size:14px;transition:all .16s ease;position:relative}.nav-item:hover{background:#ffffffb3;color:var(--text);text-decoration:none;transform:translate(2px)}.nav-item.active{background:#fff;color:var(--blue);box-shadow:var(--shadow-xs);font-weight:700}.nav-item.active:before{content:"";position:absolute;left:-16px;top:8px;bottom:8px;width:4px;background:linear-gradient(180deg,var(--orange),var(--blue));border-radius:0 4px 4px 0}.nav-item.active .icon{color:var(--orange)}.icon{width:18px;height:18px;flex-shrink:0;color:var(--muted);transition:color .16s ease}.status-card{margin-top:auto;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow-sm);font-size:12px}.status-card .top{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13px}.status-card .sub{color:var(--muted);margin-top:4px;font-size:12px}.dot{width:8px;height:8px;border-radius:50%;display:inline-block}.dot.on{background:var(--green);box-shadow:0 0 0 4px #16a34a2e;animation:pulse 2s ease-in-out infinite}.dot.off{background:var(--red);box-shadow:0 0 0 4px #d32f2f1f}.main{padding:30px 42px;overflow:auto;max-width:1520px;animation:fadeUp .4s ease}.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px;gap:20px}.page-title{font-size:26px;font-weight:800;letter-spacing:-.025em}.page-sub{color:var(--muted);font-size:13px;margin-top:4px;font-weight:500}.search{flex:1;max-width:460px;position:relative}.search input{width:100%;padding:10px 14px 10px 40px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:14px;box-shadow:var(--shadow-xs)}.search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted)}.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:22px 24px;margin-bottom:20px;box-shadow:var(--shadow-xs);transition:box-shadow .2s ease,transform .2s ease}.card.hoverable:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.card h3{margin:0 0 14px;font-size:15px;font-weight:700}.stat-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-bottom:24px}.stat-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:20px 22px;box-shadow:var(--shadow-xs);transition:all .22s ease;animation:fadeUp .4s ease backwards}.stat-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}.stat-card:nth-child(1){animation-delay:0ms}.stat-card:nth-child(2){animation-delay:60ms}.stat-card:nth-child(3){animation-delay:.12s}.stat-card:nth-child(4){animation-delay:.18s}.stat-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:14px;box-shadow:0 4px 12px #00000014;transition:transform .22s ease}.stat-card:hover .stat-icon{transform:scale(1.08) rotate(-4deg)}.stat-icon svg{width:22px;height:22px}.stat-icon.purple{background:linear-gradient(135deg,#7c7ef5,#5457e8)}.stat-icon.orange{background:linear-gradient(135deg,#FFA55C,var(--orange))}.stat-icon.blue{background:linear-gradient(135deg,#5C82D8,var(--blue))}.stat-icon.green{background:linear-gradient(135deg,#3ed07c,#17a34a)}.stat-icon.red{background:linear-gradient(135deg,#F26F6F,var(--red))}.stat-label{font-size:13px;color:var(--muted);font-weight:600}.stat-value{font-size:30px;font-weight:800;margin-top:4px;letter-spacing:-.03em;line-height:1.1}.stat-delta{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:700;margin-top:10px}.stat-delta.up{background:var(--green-tint);color:var(--green)}.stat-delta.down{background:var(--red-tint);color:var(--red)}.stat-delta.neutral{background:var(--blue-tint);color:var(--blue)}.chart-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:22px 24px;box-shadow:var(--shadow-xs);margin-bottom:20px}.chart-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:14px}.chart-title{font-size:16px;font-weight:700}.chart-sub{color:var(--muted);font-size:12.5px;margin-top:2px}.chart-legend{display:flex;gap:16px;align-items:center;font-size:12.5px;color:var(--text-2);font-weight:600}.chart-legend .swatch{width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:6px;vertical-align:middle}.split-grid{display:grid;grid-template-columns:2fr 1fr;gap:20px;margin-bottom:20px}@media (max-width: 1080px){.split-grid{grid-template-columns:1fr}}.status-list{display:flex;flex-direction:column;gap:12px}.status-list-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;background:#fbfcfe;border:1px solid var(--border);border-radius:12px}.status-list-item .left{display:flex;align-items:center;gap:10px;font-weight:600;font-size:13.5px}.status-list-item .dotc{width:10px;height:10px;border-radius:50%}.pill-count{padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700}label{display:block;font-size:13px;margin:14px 0 6px;color:var(--text-2);font-weight:600}input,textarea,select{width:100%;background:#fff;color:var(--text);border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:10px 12px;font-size:14px;font-family:inherit;transition:border-color .16s ease,box-shadow .16s ease}input:focus,textarea:focus,select:focus{outline:none;border-color:var(--blue-soft);box-shadow:0 0 0 4px #5479cb26}textarea{min-height:110px;resize:vertical}.row-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}button,.btn{background:var(--blue);color:#fff;border:0;padding:10px 18px;border-radius:var(--radius-sm);font-weight:700;cursor:pointer;font-size:13.5px;display:inline-flex;align-items:center;gap:8px;transition:transform .12s ease,background .16s ease,box-shadow .16s ease;box-shadow:0 3px 8px #2e52a82e}button:hover{background:var(--blue-dark);transform:translateY(-1px);box-shadow:0 6px 14px #2e52a838}button:active{transform:translateY(0)}button:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}button.orange{background:var(--orange);box-shadow:0 3px 8px #f27c1f40}button.orange:hover{background:var(--orange-dark);box-shadow:0 6px 14px #f27c1f52}button.secondary{background:#fff;color:var(--text);border:1px solid var(--border-strong);box-shadow:none}button.secondary:hover{background:#f4f7fc}button.ghost{background:transparent;color:var(--text-2);box-shadow:none;padding:8px 12px}button.ghost:hover{background:#f1f5fb}button.danger{background:var(--red);box-shadow:0 3px 8px #d32f2f3d}button.danger:hover{background:#b32424}button.sm{padding:6px 12px;font-size:12.5px}.table-wrap{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-xs);margin-bottom:20px}table{width:100%;border-collapse:collapse;font-size:13.5px}th,td{text-align:left;padding:12px 18px;border-bottom:1px solid var(--border)}th{background:#f8fafd;color:var(--muted);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.06em}tbody tr{transition:background .12s ease}tbody tr:last-child td{border-bottom:0}tbody tr:hover td{background:#fafcff}.badge{padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700;text-transform:capitalize}.badge.sent,.badge.completed{background:var(--green-tint);color:var(--green)}.badge.failed,.badge.stopped{background:var(--red-tint);color:var(--red)}.badge.pending,.badge.draft{background:#f1f5f9;color:#475569}.badge.running{background:var(--blue-tint);color:var(--blue)}.badge.paused{background:#fef3c7;color:#92400e}.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;background:var(--blue-tint);color:var(--blue);border:1px solid #DDE6F5;margin:2px;transition:transform .12s ease}.chip:hover{transform:translateY(-1px)}.chip.orange{background:var(--orange-tint);color:var(--orange-dark);border-color:#ffd9b0}.chip.green{background:var(--green-tint);color:var(--green);border-color:#bbf7d0}.chip.red{background:var(--red-tint);color:var(--red);border-color:#fca5a5}.chip button{background:transparent;color:inherit;padding:0;box-shadow:none;font-size:14px;line-height:1;opacity:.6}.chip button:hover{opacity:1;background:transparent}.qr-wrap{display:inline-flex;padding:14px;background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-md)}.qr-wrap img{width:280px;height:280px}.progress{background:var(--blue-tint);border-radius:999px;height:8px;overflow:hidden;margin:8px 0;position:relative}.progress>div{height:100%;background:linear-gradient(90deg,var(--orange),var(--blue));transition:width .4s cubic-bezier(.4,0,.2,1);position:relative}.progress>div.progress-shimmer:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);background-size:200% 100%;animation:shimmer 1.6s linear infinite}.row-in{animation:fadeUp .4s ease backwards}.recharts-tooltip-wrapper{transition:opacity .2s ease!important}.recharts-active-dot{filter:drop-shadow(0 0 6px rgba(242,124,31,.5))}button:active{transform:scale(.98) translateY(0)}.chart-card{transition:box-shadow .22s ease,transform .22s ease}.chart-card:hover{box-shadow:var(--shadow-md)}.nav-item:hover .icon{transform:rotate(-6deg) scale(1.1);color:var(--orange)}.icon{transition:transform .2s ease,color .2s ease}.muted{color:var(--muted);font-size:13px}.flex{display:flex;align-items:center;gap:12px}.between{justify-content:space-between}.wrap{flex-wrap:wrap}.stack{display:flex;flex-direction:column;gap:8px}.mt-sm{margin-top:8px}.mt-md{margin-top:16px}.mt-lg{margin-top:24px}.tabs{display:flex;gap:4px;padding:4px;background:var(--blue-tint);border-radius:12px;width:fit-content;margin-bottom:18px}.tab{padding:8px 16px;border-radius:9px;font-size:13px;font-weight:700;color:var(--text-2);cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .16s ease}.tab:hover{color:var(--text)}.tab.active{background:#fff;color:var(--text);box-shadow:var(--shadow-xs)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172a80;display:flex;align-items:center;justify-content:center;z-index:50;padding:20px;animation:fadeIn .2s ease}.modal{background:#fff;border-radius:var(--radius);padding:26px;width:100%;max-width:520px;box-shadow:var(--shadow-lg);animation:fadeUp .26s ease}.modal h3{margin:0 0 14px;font-size:17px}.check{width:16px;height:16px;accent-color:var(--blue)}