:root{
  --bg:#f4f9fd;--surface:#ffffff;--surface2:#f8fcff;--line:#dceaf4;--line2:#cde0ee;
  --text:#16324a;--text2:#294b65;--muted:#71879a;--muted2:#8aa0b1;
  --primary:#118bea;--primary2:#10c9c2;--primary-soft:#eaf8ff;--cyan-soft:#e8fbf9;
  --danger:#e95f70;--danger-soft:#fff0f2;--warn:#e9a11d;--warn-soft:#fff8e8;--ok:#20ad72;--ok-soft:#eafaf3;
  --shadow:0 12px 32px rgba(41,86,119,.09);--shadow-sm:0 6px 18px rgba(41,86,119,.07);--radius:22px;
}
*{box-sizing:border-box}html{background:var(--bg);color-scheme:light}body{margin:0;background:radial-gradient(circle at 85% -10%,#dff7ff 0,transparent 28%),radial-gradient(circle at -15% 22%,#e7fbf9 0,transparent 28%),linear-gradient(180deg,#fbfdff 0%,var(--bg) 58%,#eef7fc 100%);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;min-height:100vh}button,input,select,textarea{font:inherit}button{touch-action:manipulation}.topbar{position:sticky;top:0;z-index:20;height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:rgba(255,255,255,.9);backdrop-filter:blur(18px);border-bottom:1px solid rgba(205,224,238,.8);box-shadow:0 4px 20px rgba(34,86,121,.04)}.brand-row{display:flex;gap:10px;align-items:center;min-width:0}.brand-logo{width:46px;height:46px;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(17,139,234,.08))}.brand-copy{display:flex;flex-direction:column;min-width:0}.brand-copy b{font-size:18px;line-height:1;color:#0d3d6c}.brand-copy small{font-size:10px;letter-spacing:.08em;color:#7290a4;margin-top:4px;white-space:nowrap}.top-actions{display:flex;align-items:center;gap:9px}.icon-btn,.avatar{border:1px solid var(--line);background:#fff;color:var(--text);height:40px;min-width:40px;border-radius:13px;display:grid;place-items:center;text-decoration:none;box-shadow:var(--shadow-sm)}.avatar{font-size:13px;font-weight:850;color:#087ab8;background:linear-gradient(135deg,#e7fbf9,#e7f3ff)}.content{max-width:760px;margin:0 auto;padding:20px 14px 108px}.view{display:none}.view.active{display:block}.hero{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:8px 2px 15px}.hero h1,.section-title h1{font-size:28px;line-height:1.12;margin:6px 0 8px;letter-spacing:-.035em;color:#153c5b}.eyebrow{margin:0;color:#08a8b1;font-size:10px;font-weight:900;letter-spacing:.16em}.muted{color:var(--muted);margin:0;line-height:1.5}.pill{padding:8px 11px;border-radius:999px;background:#eef5f9;border:1px solid var(--line);color:#658195;font-size:10px;font-weight:850;white-space:nowrap}.pill.online{background:var(--ok-soft);border-color:#bfe8d5;color:var(--ok)}.welcome-card{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,#eefbff,#f0fcfa);border:1px solid #d2ecf4;border-radius:18px;padding:12px 14px;margin:2px 0 14px;box-shadow:var(--shadow-sm)}.welcome-icon{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;background:white;box-shadow:var(--shadow-sm);font-size:20px}.welcome-card div:last-child{display:flex;flex-direction:column}.welcome-card small{color:var(--muted);font-size:11px}.welcome-card strong{font-size:14px;margin-top:2px;color:#1b4c6c}label{display:block;color:#365a72;font-size:12px;font-weight:800;margin:12px 0 8px}input,select,textarea{width:100%;margin-top:7px;border:1px solid var(--line2);background:#fff;color:var(--text);padding:13px 14px;border-radius:14px;outline:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}input::placeholder,textarea::placeholder{color:#a0b0bd}input:focus,select:focus,textarea:focus{border-color:#54bff0;box-shadow:0 0 0 4px rgba(17,139,234,.08)}.select-wrap{margin-bottom:14px}.metric-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.metric-card{position:relative;overflow:hidden;color:var(--text);text-align:left;cursor:pointer;background:#fff;border:1px solid var(--line);border-radius:18px;padding:15px;box-shadow:var(--shadow-sm);transition:.18s ease}.metric-card:before{content:"";position:absolute;right:-18px;top:-20px;width:68px;height:68px;border-radius:50%;background:linear-gradient(135deg,rgba(16,201,194,.13),rgba(17,139,234,.12))}.metric-card:hover{transform:translateY(-1px);border-color:#b9ddec}.metric-card .k{position:relative;font-size:10px;color:#7590a3;text-transform:uppercase;letter-spacing:.055em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.metric-card .v{position:relative;font-size:27px;font-weight:900;margin:8px 0 2px;letter-spacing:-.04em;color:#173f5d}.metric-card .u{position:relative;font-size:11px;color:#88a0b1}.panel{background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-top:13px;box-shadow:var(--shadow)}.chart-panel{padding-bottom:12px}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.panel-head h2{font-size:18px;margin:3px 0;color:#173f5d;letter-spacing:-.02em}.mini-select{width:auto;margin:0;padding:9px 11px;font-size:11px;background:#f8fcff}.chips{display:flex;gap:7px;overflow:auto;padding:12px 0;scrollbar-width:none}.chip{white-space:nowrap;border:1px solid var(--line2);background:#f8fbfd;color:#6c8698;border-radius:999px;padding:8px 11px;font-size:10px;font-weight:750}.chip.active{border-color:#7acff1;color:#087cbe;background:#eaf8ff}.chart-wrap{background:linear-gradient(180deg,#fbfdff,#f6fbff);border:1px solid #e4eff6;border-radius:16px;padding:5px 2px 0}canvas{width:100%;height:260px;display:block}.empty{padding:42px 10px;text-align:center;color:var(--muted)}.hidden{display:none!important}.section-title{padding:9px 2px 5px}.btn{border:0;border-radius:15px;padding:14px 16px;font-weight:900;cursor:pointer;letter-spacing:.01em}.btn.primary{background:linear-gradient(135deg,#12c9c2,#118bea);color:#fff;box-shadow:0 9px 20px rgba(17,139,234,.2)}.btn.primary:active{transform:translateY(1px)}.full{width:100%;margin-top:13px}.control-card{background:linear-gradient(180deg,#fff,#fbfdff)}.control-status{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:13px;padding:11px 12px;background:#f3faff;border:1px solid #dfedf5;border-radius:15px}.control-status div{display:flex;flex-direction:column}.control-status small{color:var(--muted);font-size:10px}.control-status strong{font-size:14px;color:#174868;margin-top:2px}.soft-badge{font-size:9px;font-weight:850;padding:6px 9px;border-radius:999px;background:#e8fbf9;color:#079b9a;border:1px solid #c6eeea}.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.quick{border:1px solid var(--line);background:#fff;color:#21475f;border-radius:17px;padding:15px 12px;font-weight:850;display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;box-shadow:var(--shadow-sm)}.quick span{font-size:22px}.quick b{font-size:13px}.quick small{font-size:9px;color:var(--muted);font-weight:650}.quick-on{background:linear-gradient(145deg,#effcf9,#f8fffd);border-color:#c7eee4}.quick-off{background:linear-gradient(145deg,#f4f9ff,#fbfdff);border-color:#d4e6f3}.quick:active{transform:scale(.985);border-color:#59bfee}.advanced-panel{margin-top:12px;border:1px dashed #cddfe9;border-radius:15px;padding:0 12px;background:#fafcff}.advanced-panel summary{cursor:pointer;padding:12px 2px;color:#527086;font-size:11px;font-weight:800}.tiny{font-size:10px;color:#7d95a6;line-height:1.5}.text-btn{background:none;border:0;color:#078fa8;font-weight:850;font-size:11px}.list{display:flex;flex-direction:column;gap:9px}.list-item{border:1px solid #dceaf3;background:#fbfdff;border-radius:15px;padding:12px 13px}.list-item .row{display:flex;justify-content:space-between;gap:12px;align-items:center}.list-item b{font-size:13px;color:#21465e}.list-item p{margin:5px 0 0;color:#71889a;font-size:11px;line-height:1.45}.list-item time{font-size:9px;color:#90a3b1}.status{font-size:8px;font-weight:900;text-transform:uppercase;padding:5px 7px;border-radius:999px;background:#edf4f8;color:#648196;border:1px solid #dce9f1}.status-queued{background:#eaf6ff;color:#147ebd;border-color:#cce8f8}.status-expired{background:#f0f3f5;color:#7b8b96;border-color:#dfe5e9}.status-done,.status-acknowledged,.status-success,.status-completed{background:var(--ok-soft);color:var(--ok);border-color:#c5ead8}.status-failed,.status-error{background:var(--danger-soft);color:var(--danger);border-color:#f2cbd1}.severity-high,.severity-critical{color:#ce4255;background:var(--danger-soft);border-color:#f3c9d0}.severity-warning,.severity-warn{color:#bd7a0a;background:var(--warn-soft);border-color:#f0dfb4}.severity-info,.severity-low{color:#167fb7;background:#eaf7ff;border-color:#cce9f7}.flow-card{background:linear-gradient(145deg,#f8fdff,#f6fcfb)}.flow-cloud{font-size:24px}.flow-line{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid #e8f0f5}.flow-line:last-of-type{border-bottom:0}.flow-line>b{display:grid;place-items:center;min-width:27px;height:27px;border-radius:50%;background:linear-gradient(135deg,#dff9f6,#e6f5ff);color:#087da9;font-size:11px}.flow-line span{line-height:1.5;color:#49677b;font-size:11px}.flow-note{margin-bottom:0}.api-flow-status{margin-top:12px;padding:12px 14px;border:1px solid #bee9e5;border-radius:14px;background:#effcf9;line-height:1.55;color:#496c73;overflow-wrap:anywhere}.api-flow-status b{color:#078f83}.api-flow-status code,.flow-card code{font-size:.9em}.alert-summary{display:flex;align-items:flex-start;gap:13px;background:linear-gradient(135deg,#f7fcff,#f8fffd)}.alert-symbol{width:46px;height:46px;border-radius:16px;background:linear-gradient(135deg,#e2f6ff,#e6fbf8);display:grid;place-items:center;font-size:22px}.alert-summary div:last-child{display:flex;flex-direction:column}.alert-summary small{font-size:10px;color:#7e95a5}.alert-summary strong{font-size:14px;margin-top:2px;color:#1f4a65}.alert-summary p{font-size:10px;color:#7890a1;margin:4px 0 0;line-height:1.45}.bottom-nav{position:fixed;left:50%;transform:translateX(-50%);bottom:0;z-index:30;width:min(760px,100%);height:76px;padding-bottom:env(safe-area-inset-bottom);background:rgba(255,255,255,.96);backdrop-filter:blur(18px);border-top:1px solid #dceaf3;box-shadow:0 -8px 30px rgba(44,90,121,.08);display:grid;grid-template-columns:repeat(3,1fr)}.nav{position:relative;border:0;background:transparent;color:#8da1af;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}.nav-icon{font-size:19px;line-height:1}.nav b{font-size:9px}.nav.active{color:#078faa}.nav.active:after{content:"";position:absolute;top:5px;width:30px;height:3px;border-radius:999px;background:linear-gradient(90deg,#10c9c2,#118bea)}.badge{position:absolute;top:9px;left:calc(50% + 9px);min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--danger);color:white;font-size:8px;display:grid;place-items:center;font-style:normal}.toast{position:fixed;z-index:50;left:50%;bottom:92px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#173e58;color:white;border:1px solid #285c78;border-radius:13px;padding:11px 14px;font-size:11px;transition:.25s;max-width:88%;box-shadow:0 10px 30px rgba(25,65,91,.2)}.toast.show{opacity:1;transform:translate(-50%,0)}.toast.error{border-color:#e4a5ae;background:#8c3945}.alert{padding:12px;border-radius:12px;margin:14px 0;font-size:11px}.alert.error{background:var(--danger-soft);border:1px solid #f3cbd1;color:#b74152}.alert.success{background:var(--ok-soft);border:1px solid #c6ead8;color:#14784e}code{color:#087da9;background:#eef8fd;padding:1px 4px;border-radius:5px}
/* LOGIN */
.login-body{display:grid;place-items:center;padding:22px;min-height:100vh;background:radial-gradient(circle at 50% -5%,#dff7ff 0,transparent 35%),linear-gradient(180deg,#fbfdff,#eff8fd)}.login-shell{width:min(440px,100%)}.login-brand{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:16px}.login-brand img{width:154px;max-height:94px;object-fit:contain}.login-brand span{font-size:10px;letter-spacing:.1em;color:#7691a5;margin-top:2px}.login-card{width:100%;background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:26px;padding:24px;box-shadow:0 22px 50px rgba(49,91,119,.12)}.login-card h1{font-size:30px;letter-spacing:-.04em;color:#173e5c;margin:7px 0 8px}.login-note{text-align:center;margin:13px 0 0}.login-footer{text-align:center;color:#91a4b2;font-size:9px;margin-top:14px}.install-body{display:grid;place-items:center;padding:22px;min-height:100vh}.install-card{width:min(440px,100%);background:white;border:1px solid var(--line);border-radius:24px;padding:22px;box-shadow:var(--shadow)}.install-card h1{font-size:30px;margin:22px 0 8px}.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}.schema-grid{display:grid;gap:7px;margin:14px 0}.schema-grid div{display:flex;justify-content:space-between;background:#f7fbfd;padding:9px 10px;border-radius:10px;font-size:11px}.schema-grid span{color:#078fa8}
@media(min-width:600px){.metric-grid{grid-template-columns:repeat(4,1fr)}.content{padding-left:20px;padding-right:20px}.brand-logo{width:50px;height:50px}.brand-copy b{font-size:19px}}
@media(max-width:390px){.hero h1,.section-title h1{font-size:25px}.quick-grid{grid-template-columns:1fr}.brand-copy small{font-size:9px}.topbar{padding:0 12px}.content{padding-left:11px;padding-right:11px}}