*{box-sizing:border-box}
:root{--bg:#f4f7fc;--card:#fff;--text:#182338;--muted:#718096;--line:#e5eaf2;--primary:#2166e8;--primary2:#4f46e5;--danger:#dc3545;--success:#0f9d67;--shadow:0 12px 35px rgba(24,43,77,.07)}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Tahoma,"Segoe UI",Arial,sans-serif;font-size:14px}
body{min-height:100vh}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}
.topbar{height:76px;background:linear-gradient(100deg,#102e72,#1d4fd0 60%,#5747dc);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 30px;box-shadow:0 4px 20px rgba(24,58,140,.18)}
.brand,.top-actions{display:flex;align-items:center;gap:11px}.brand b{display:block;font-size:16px}.brand small{display:block;font-size:10px;opacity:.7;margin-top:2px}.brand-mark{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:21px;font-weight:800}.top-actions{font-size:12px}.top-actions a{opacity:.9;padding:8px 12px;border-radius:8px}.top-actions a:hover{background:rgba(255,255,255,.1)}
.online-dot{width:7px;height:7px;border-radius:50%;background:#2dd49a;display:inline-block;box-shadow:0 0 0 4px rgba(45,212,154,.12)}
.app-shell{display:grid;grid-template-columns:250px minmax(0,1fr);min-height:calc(100vh - 76px)}
.sidebar{background:#fff;border-left:1px solid var(--line);padding:22px 14px;display:flex;flex-direction:column;gap:5px}.sidebar-label{font-size:11px;color:#a0aec0;padding:4px 12px 11px}.sidebar>a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:11px;color:#4a5568;transition:.2s}.sidebar>a:hover{background:#f2f6ff;color:#1d56c9}.sidebar>a.active{background:#edf4ff;color:#145bd9;font-weight:700;box-shadow:inset -3px 0 0 #2166e8}.nav-icon{width:23px;text-align:center;font-size:18px}.sidebar-bottom{margin-top:auto;background:#f2fbf7;border:1px solid #d9f1e7;color:#16815d;border-radius:10px;padding:11px 9px;font-size:10px;text-align:center}
.content{padding:30px;max-width:1450px;width:100%;margin:0 auto}.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:24px}.page-head h1{margin:3px 0 0;font-size:26px}.eyebrow{font-size:10px;letter-spacing:1.4px;color:#91a0b6;font-weight:800}.eyebrow.light{color:rgba(255,255,255,.65)}.muted{color:var(--muted);font-size:12px}
.hero{background:linear-gradient(110deg,#173d93,#2867df 58%,#5549d9);color:#fff;border-radius:18px;padding:26px 28px;display:flex;justify-content:space-between;align-items:center;gap:25px;box-shadow:0 18px 45px rgba(30,78,184,.2);margin-bottom:22px}.hero h2{margin:6px 0 7px;font-size:24px}.hero p{margin:0;opacity:.82}.hero-flow{display:flex;align-items:center;gap:10px;direction:ltr;white-space:nowrap}.hero-flow span{font-size:10px;padding:9px 11px;border:1px solid rgba(255,255,255,.2);border-radius:9px;background:rgba(255,255,255,.08)}.hero-flow b{opacity:.65}
.stat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-bottom:20px}.stat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:var(--shadow)}.stat span{display:block;color:#69768a;font-size:11px}.stat strong{display:block;font-size:28px;margin:9px 0 4px;color:#1d4ed8}.stat small{color:#a0aabd;font-size:10px}.success-stat strong{color:#0f9d67}.danger-stat strong{color:#dc3545}
.two-col{display:grid;grid-template-columns:1.6fr 1fr;gap:18px}.panel{background:#fff;border:1px solid var(--line);border-radius:15px;padding:20px;box-shadow:var(--shadow);margin-bottom:18px}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}.panel-head h3{margin:0;font-size:15px}.panel-head a{color:#1d63dc;font-size:11px}.count{display:inline-grid;place-items:center;min-width:24px;height:22px;border-radius:20px;background:#eef4ff;color:#2166e8;font-size:11px;margin-right:6px}
table{width:100%;border-collapse:collapse}th,td{text-align:right;padding:12px 10px;border-bottom:1px solid #edf0f5;vertical-align:middle}th{color:#8b97a8;font-size:10px;font-weight:700;background:#fbfcfe}td{font-size:11px}tbody tr:hover{background:#fbfcff}code{font-family:Consolas,monospace;direction:ltr;unicode-bidi:plaintext;background:#f3f5f9;padding:4px 7px;border-radius:6px;color:#536174;font-size:10px}.empty{text-align:center;color:#9aa6b7;padding:35px!important}.table-wrap{overflow:auto}
.btn{border:0;border-radius:9px;padding:9px 14px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;font-size:11px}.btn-primary{background:linear-gradient(110deg,#1767e9,#4a55dc);color:#fff;box-shadow:0 6px 16px rgba(33,102,232,.2)}.btn-primary:hover{filter:brightness(1.05)}.btn-secondary{background:#edf4ff;color:#175bd1}.btn-light{background:#f5f7fa;color:#536174;border:1px solid #e4e8ef}.btn-danger{background:#fff1f2;color:#c52f3d;border:1px solid #ffd9dd}.btn-sm{padding:6px 9px;font-size:10px}.btn-lg{padding:12px 16px}.full{width:100%;margin-top:14px}
.actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.actions form{margin:0}.badge{display:inline-block;border-radius:20px;padding:5px 9px;font-size:9px;font-weight:700}.badge-sent,.badge-success{background:#e5f8f0;color:#0c8a5a}.badge-failed,.badge-error{background:#fff0f1;color:#c5303c}.badge-pending,.badge-warning{background:#fff8df;color:#a77500}.badge-off{background:#f1f3f6;color:#7b8796}.badge-info{background:#edf4ff;color:#2c64c7}
.form-grid{display:grid;grid-template-columns:2fr 2fr 1fr auto;gap:12px;align-items:end}.form-grid.route-form{grid-template-columns:1fr 1fr auto}.stack{display:flex;flex-direction:column;gap:13px}label{display:block;color:#536174;font-size:11px;font-weight:700}input,textarea,select{width:100%;margin-top:7px;padding:11px 12px;border:1px solid #dfe5ed;background:#fff;border-radius:9px;outline:none;color:var(--text);font-size:12px}input:focus,textarea:focus,select:focus{border-color:#6b8fe6;box-shadow:0 0 0 3px rgba(33,102,232,.08)}textarea{min-height:105px;resize:vertical}.form-end{display:flex;align-items:flex-end}.alert{padding:12px 15px;border-radius:10px;margin-bottom:17px;font-size:11px}.alert-success{background:#e8f8f1;color:#137a57;border:1px solid #d4f0e5}.alert-danger{background:#fff0f1;color:#a92936;border:1px solid #ffd9dd}
.health-row{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-bottom:1px solid #edf0f5;font-size:11px}.health-row b{font-size:10px;color:#31526f}.text-success{color:#0f9d67!important}.route-map{display:flex;flex-direction:column;gap:10px}.route-card{display:grid;grid-template-columns:1fr 35px 1fr auto;align-items:center;gap:12px;border:1px solid #e8ecf2;border-radius:12px;padding:13px 14px;background:#fcfdff}.route-card>div:first-child,.route-card>div:nth-child(3){display:flex;flex-direction:column;gap:3px}.route-card b{font-size:12px}.route-card small{font-size:9px;color:#9aa6b7}.route-label{font-size:8px;color:#91a0b6;letter-spacing:1px;font-weight:800}.route-arrow{font-size:19px;color:#2b66dc;text-align:center}.route-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}.error-cell{max-width:240px;color:#c5303c}.webhook-box{display:flex;justify-content:space-between;align-items:center;gap:18px;background:#f8faff;border:1px solid #e5ebf7;border-radius:12px;padding:16px}.webhook-box code{display:block;margin-top:7px}.label{font-size:10px;color:#8b97a8}.api-result,pre{white-space:pre-wrap;word-break:break-word;direction:ltr;text-align:left;background:#111827;color:#d9e4f3;padding:15px;border-radius:10px;font:11px/1.6 Consolas,monospace}.api-result{margin-top:14px}
details summary{cursor:pointer;color:#2b66dc;font-size:10px}details pre{margin:8px 0;max-height:180px;overflow:auto}
.login-page{background:radial-gradient(circle at 20% 20%,#dfeaff 0,#f4f7fc 35%,#f4f7fc 100%);min-height:100vh;display:grid;place-items:center}.login-wrap{width:min(440px,calc(100% - 30px))}.login-brand{display:flex;align-items:center;justify-content:center;gap:11px;margin-bottom:16px}.login-brand b{display:block;font-size:19px}.login-brand span{display:block;font-size:10px;color:#7a8799;margin-top:3px}.login-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px;box-shadow:0 25px 70px rgba(35,62,107,.13)}.login-card h1{margin:7px 0;font-size:22px}.login-card p{margin:0 0 22px}.login-footer{text-align:center;color:#9aa6b7;font-size:10px;margin-top:15px}
@media(max-width:1200px){.stat-grid{grid-template-columns:repeat(3,1fr)}.form-grid{grid-template-columns:1fr 1fr}.form-end{align-items:center}.two-col{grid-template-columns:1fr}}
@media(max-width:800px){.app-shell{grid-template-columns:1fr}.sidebar{border-left:0;border-bottom:1px solid var(--line);padding:9px;display:flex;flex-direction:row;overflow:auto}.sidebar-label,.sidebar-bottom{display:none}.sidebar>a{min-width:max-content;padding:9px 12px}.content{padding:18px}.hero{display:block}.hero-flow{margin-top:18px}.stat-grid{grid-template-columns:repeat(2,1fr)}.topbar{padding:0 16px}.top-actions>span:not(.online-dot){display:none}.route-card{grid-template-columns:1fr}.route-arrow{transform:rotate(-90deg)}.route-actions{justify-content:flex-start}.webhook-box{display:block}}
@media(max-width:520px){.stat-grid{grid-template-columns:1fr 1fr;gap:8px}.stat{padding:13px}.stat strong{font-size:22px}.page-head h1{font-size:22px}.form-grid,.form-grid.route-form{grid-template-columns:1fr}.panel{padding:14px}.hero{padding:20px}.hero h2{font-size:20px}}

.link-button{background:none;border:0;color:inherit;cursor:pointer;font:inherit;padding:0;margin:0}.link-button:hover{text-decoration:underline}