:root{--bg:#0a1628;--bg2:#0f1f38;--card:#132a4a;--line:#1f3a62;--tx:#e8eef7;--mut:#8ea3c0;--or:#ff8a1f;--ok:#2ecc8f;--er:#ff5c5c;--wa:#f5c542}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--tx);font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.login{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 50% 0,#183a6b,var(--bg) 70%)}
.lcard{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:28px;max-width:360px;width:100%;text-align:center}
.lcard img{width:150px;height:150px;object-fit:cover;border-radius:50%;border:3px solid var(--or)}.lcard h1{margin:12px 0 0;color:var(--or)}.lcard p{color:var(--mut);margin:4px 0 16px}
input,button{font:inherit;border-radius:10px;padding:12px;border:1px solid var(--line)}input{width:100%;background:var(--bg2);color:var(--tx);margin-bottom:10px}
button{background:var(--or);color:#1a0d00;font-weight:700;border:0;cursor:pointer;width:100%}.ghost{background:transparent;color:var(--mut);border:1px solid var(--line);width:auto;padding:6px 12px}
.err{color:var(--er)!important}
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--bg2);border-bottom:1px solid var(--line)}
.top div{flex:1;display:flex;flex-direction:column}.top small{color:var(--mut);font-size:12px}.logo{width:38px;height:38px;border-radius:50%;border:2px solid var(--or)}
#menu{display:none;width:auto;background:none;color:var(--tx);font-size:22px;padding:4px 8px}
#app{display:grid;grid-template-columns:230px 1fr;grid-template-rows:auto 1fr;min-height:100vh}.top{grid-column:1/3}
nav{background:var(--bg2);border-right:1px solid var(--line);padding:12px 8px}nav a{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:10px;color:var(--mut);text-decoration:none;margin-bottom:2px}
nav a.on,nav a:hover{background:var(--card);color:var(--tx)}nav a.on{box-shadow:inset 3px 0 var(--or)}nav .n{margin-left:auto;background:var(--er);color:#fff;border-radius:99px;font-size:11px;padding:0 7px}
main{padding:22px;max-width:1150px;width:100%}h2{margin:0 0 4px}.sub{color:var(--mut);margin:0 0 18px;font-size:13px}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));margin-bottom:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px}.card h3{margin:0 0 6px;font-size:15px;display:flex;justify-content:space-between;gap:8px}
.big{font-size:30px;font-weight:800;color:var(--or)}.mut{color:var(--mut);font-size:13px}
.b{font-size:11px;font-weight:700;padding:2px 8px;border-radius:99px;white-space:nowrap;align-self:flex-start}.ok{background:#2ecc8f22;color:var(--ok)}.er{background:#ff5c5c22;color:var(--er)}.wa{background:#f5c54222;color:var(--wa)}.nc{background:#8ea3c022;color:var(--mut)}
.bar{height:8px;background:var(--bg2);border-radius:9px;overflow:hidden;margin:8px 0}.bar i{display:block;height:100%;background:var(--or)}
table{width:100%;border-collapse:collapse;font-size:14px}td,th{text-align:left;padding:9px 6px;border-bottom:1px solid var(--line)}th{color:var(--mut);font-weight:600;font-size:12px}
.al{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:12px;background:var(--card);border-left:4px solid var(--mut);margin-bottom:8px}.al.alta{border-color:var(--er)}.al.media{border-color:var(--wa)}.al.info{border-color:#4a90e2}
.empty{text-align:center;padding:30px;color:var(--mut)}.empty img{width:110px;height:110px;border-radius:50%;object-fit:cover;opacity:.85;border:2px solid var(--line)}
.dots span{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:3px}.dots .success{background:var(--ok)}.dots .error{background:var(--er)}.dots .running,.dots .waiting{background:var(--wa)}
.tw{overflow-x:auto}
@media(max-width:800px){#app{grid-template-columns:1fr}#menu{display:block}nav{display:none;position:fixed;top:59px;left:0;right:0;bottom:0;z-index:9;border:0}nav.open{display:block}main{padding:14px}.big{font-size:26px}}
[hidden]{display:none!important}
a.card{color:inherit;text-decoration:none;display:block;transition:.15s}a.card:hover{border-color:var(--or);transform:translateY(-2px)}
.card.er{border-left:4px solid var(--er)}.card.wa{border-left:4px solid var(--wa)}.card h3 em{font-style:normal;color:var(--or);font-weight:800}
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:10px 0}.stats div{background:var(--bg2);border-radius:10px;padding:8px 4px;text-align:center}.stats b{display:block;font-size:20px;color:var(--or)}.stats span{font-size:11px;color:var(--mut)}
main>.stats{max-width:640px}.nc-t{color:var(--mut);font-style:italic;font-size:12px;font-weight:400}
.hero{display:flex;gap:14px;align-items:center;margin-bottom:8px}.hero img{width:64px;height:64px;border-radius:50%;border:2px solid var(--or)}
.sec{margin:22px 0 10px;font-size:16px}.back{color:var(--or);text-decoration:none;font-size:13px}
.flow{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:8px}
.tag{font-size:10px;font-weight:800;padding:2px 6px;border-radius:5px}.tag.n8n{background:#ea4b7133;color:#ff7aa0}.tag.make{background:#7b5cff33;color:#b3a2ff}
.acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}button.sm{width:auto;padding:7px 12px;font-size:13px;background:var(--bg2);color:var(--tx);border:1px solid var(--line)}button.sm:hover{border-color:var(--or)}button.sm.alt{color:var(--or)}button.sm.danger{color:var(--er);border-color:#ff5c5c55}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--mut)}.dot.success{background:var(--ok)}.dot.error{background:var(--er)}.red{color:var(--er)}
.modal{position:fixed;inset:0;background:#000a;display:grid;place-items:center;z-index:20;padding:20px}.mbox{background:var(--card);border:1px solid var(--or);border-radius:16px;padding:20px;max-width:380px;text-align:center}.mbox img{width:60px;border-radius:50%}.mbox .acts{justify-content:center}.mbox button{width:auto;padding:10px 18px}
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--card);border:1px solid var(--ok);padding:10px 16px;border-radius:10px;opacity:0;transition:.3s;z-index:30;pointer-events:none}#toast.show{opacity:1}#toast.bad{border-color:var(--er)}
@media(max-width:800px){.stats b{font-size:17px}.stats span{font-size:10px}}