@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{font-family:Manrope,Inter,system-ui,sans-serif;color:#e9f0f3;background:#0b1117;font-synthesis:none;text-rendering:optimizeLegibility;--muted:#82919b;--line:#202d35;--teal:#36d6bd;--red:#ff626b;--panel:#111a21}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 50% 0%,#172630 0%,#0b1117 58%)}.topbar{height:76px;padding:0 clamp(20px,5vw,76px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff0a;background:#0a1016d9}.brand img{width:164px;height:auto;display:block}.product{font-size:14px;font-weight:800;letter-spacing:.15em;display:flex;align-items:center;gap:2px}.product>span{color:var(--teal)}.product small{font-size:8px;letter-spacing:.13em;color:#83929a;margin-left:11px;font-weight:600}.powered{display:flex;align-items:center;gap:10px;text-decoration:none;color:#8e9da4;font-size:8px;letter-spacing:.13em}.powered img{width:100px;height:auto}.layout{width:min(1120px,calc(100% - 36px));margin:0 auto;padding:52px 0 28px}.intro{margin-bottom:30px}.eyebrow,.label{font:500 10px 'DM Mono',monospace;letter-spacing:.12em;color:#87979f}.eyebrow{display:flex;align-items:center;gap:9px}.eyebrow i,.pill i{width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 12px #36d6bd90}h1{font-size:clamp(38px,6vw,62px);line-height:1.05;letter-spacing:-.055em;margin:18px 0 12px;font-weight:700}h1 em{font-style:normal;color:var(--teal)}.intro>p{color:#9caab1;max-width:530px;font-size:14px;line-height:1.7;margin:0}.card{background:linear-gradient(145deg,#131e26,#10181e);border:1px solid var(--line);border-radius:13px}.status-card{padding:22px 24px;display:flex;justify-content:space-between;align-items:center;gap:20px}.status-main{display:flex;align-items:center;gap:16px}.status-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:12px;background:#36d6bd17;color:var(--teal);font-size:26px}.status-main h2{font-size:16px;margin:6px 0 3px}.status-main p,.metric p,.chart-head p{font-size:11px;color:var(--muted);margin:0}.status-actions{display:flex;gap:9px}.button{border:1px solid #34444d;background:#17232b;color:#dce6ea;padding:11px 15px;border-radius:8px;font:600 11px Manrope,sans-serif;cursor:pointer;transition:.2s}.button:hover{border-color:#55cdbd;color:#fff;transform:translateY(-1px)}.button.primary{background:#30cbb1;color:#071411;border-color:#30cbb1}.button:disabled{opacity:.55;cursor:wait;transform:none}.button span{margin-right:6px}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:14px 0}.metric{padding:17px 18px}.metric>div{margin:10px 0 3px;display:flex;align-items:baseline;gap:5px}.metric strong{font:500 28px 'DM Mono',monospace;letter-spacing:-.06em}.metric small{font:11px 'DM Mono',monospace;color:#83959e}.metric p{font-size:10px}.chart-card{padding:22px 23px 14px}.chart-head,.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.chart-head h2,.section-head h2{font-size:15px;margin:7px 0 4px}.chart-legend{display:flex;gap:16px;color:#aab7bc;font-size:9px}.chart-legend span{display:flex;align-items:center;gap:6px}.legend-line{width:13px;height:2px;background:var(--teal)}.legend-fail{width:3px;height:13px;background:var(--red)}.legend-gap{width:12px;height:8px;background:#76838b4a}.chart-wrap{height:230px;position:relative;margin-top:14px}.chart-wrap canvas{width:100%;height:100%;display:block}.chart-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#8c9ba2;text-align:center}.chart-empty span{font-size:27px;color:#344750}.chart-empty strong{font-size:12px;color:#bac5c8}.chart-empty small{font-size:10px}.chart-foot{border-top:1px solid #ffffff0a;padding-top:11px;display:flex;gap:20px;align-items:center;color:#76868e;font:10px 'DM Mono',monospace}.chart-foot span:nth-child(2){flex:1}.text-button{background:none;border:0;color:#82949c;font:10px Manrope,sans-serif;cursor:pointer}.text-button:hover{color:var(--red)}.lower-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}.targets-card,.history-card{padding:19px 20px}.pill,.local-badge{display:flex;align-items:center;gap:7px;color:#8ea29f;font:9px 'DM Mono',monospace;letter-spacing:.06em}.pill{border:1px solid #2b4947;border-radius:30px;padding:7px 9px}.pill i{width:5px;height:5px}.input-label{display:block;margin:17px 0 7px;color:#9caab1;font-size:10px}.target-input{display:flex;gap:7px}.target-input input{flex:1;min-width:0;padding:10px 12px;background:#0d151a;border:1px solid #28363e;border-radius:7px;color:#e6eff1;font:11px Manrope;outline:none}.target-input input:focus{border-color:#36bfae}.target-input button{width:37px;border-radius:7px;border:0;background:#2ec8ae;color:#09211d;font-size:22px;cursor:pointer}.targets-list{margin-top:10px}.target-row{display:flex;align-items:center;gap:9px;padding:9px 2px;border-bottom:1px solid #ffffff0a;font-size:11px}.target-dot{width:7px;height:7px;border-radius:50%;background:#52636b}.target-row.ok .target-dot{background:var(--teal);box-shadow:0 0 9px #36d6bd70}.target-row.fail .target-dot{background:var(--red)}.target-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.target-state{color:#809099;font:9px 'DM Mono',monospace}.remove-target{border:0;color:#718087;background:none;cursor:pointer}.fineprint{font-size:9px;line-height:1.55;color:#75848b;margin:12px 0 0}.local-badge{color:#86c7bc}.history-list{margin-top:10px}.history-empty{padding:20px 0;text-align:center;color:#718087;font-size:10px}.history-row{display:grid;grid-template-columns:9px 1fr auto;gap:9px;align-items:center;padding:9px 1px;border-bottom:1px solid #ffffff0a;font-size:10px}.history-mark{width:6px;height:6px;border-radius:50%;background:var(--teal)}.history-row.fail .history-mark{background:var(--red)}.history-row small{display:block;color:#75858d;font-size:9px;margin-top:3px}.history-row time{font:9px 'DM Mono',monospace;color:#829199}.note{display:flex;gap:10px;padding:13px 15px;margin-top:14px;border:1px solid #29383e;border-radius:9px;background:#11191d;color:#819096;font-size:9px;line-height:1.55}.note>span{color:#55cdbc;font-size:14px}.note p{margin:0}.note strong{color:#aab7ba}footer{display:flex;justify-content:space-between;padding:21px 2px 0;color:#72818a;font-size:9px}footer i{color:#3ccbb6;font-style:normal}footer a{color:#a9b7ba;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #55d6c4;outline-offset:2px}
@media(max-width:720px){.topbar{height:65px;padding:0 17px}.brand img{width:130px}.product{font-size:12px}.product small{display:none}.powered{gap:0}.powered span{display:none}.powered img{width:90px}.layout{padding-top:36px}.status-card{align-items:flex-start;flex-direction:column;padding:18px}.status-actions{width:100%}.status-actions .button{flex:1;padding:11px 8px;font-size:10px}.metrics{grid-template-columns:repeat(2,1fr);gap:9px}.metric{padding:14px}.metric strong{font-size:24px}.chart-card{padding:18px 14px 13px}.chart-head{align-items:flex-start;flex-direction:column}.chart-legend{gap:13px}.chart-wrap{height:200px}.lower-grid{grid-template-columns:1fr}.targets-card,.history-card{padding:17px}.note{font-size:9px}footer{gap:12px;line-height:1.5}footer span:last-child{text-align:right}}@media(max-width:380px){.powered img{width:70px}.brand img{width:112px}.status-actions .button{font-size:9px}.chart-legend{font-size:8px}}

.metrics{grid-template-columns:repeat(5,minmax(0,1fr))}@media(max-width:900px){.metrics{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:720px){.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}

.legend-ping{width:13px;height:2px;background:#ffc56e}

.metric .benchmark{display:block;margin-top:8px;color:#82949a;font-size:9px;line-height:1.4;min-height:25px}.metric.is-measuring{position:relative;border-color:#39d4bf;box-shadow:0 0 0 1px #39d4bf55,0 0 22px #2bcbb52c,inset 0 0 20px #25d2b91c;animation:measure-glow 1.25s ease-in-out infinite alternate}.metric.is-measuring .label{color:#a2f6e8}.metric.is-measuring strong{color:#70efdc}@keyframes measure-glow{from{box-shadow:0 0 0 1px #39d4bf44,0 0 10px #2bcbb51a,inset 0 0 10px #25d2b90b}to{box-shadow:0 0 0 1px #39d4bf99,0 0 25px #2bcbb54d,inset 0 0 24px #25d2b929}}@media(prefers-reduced-motion:reduce){.metric.is-measuring{animation:none;box-shadow:0 0 0 2px #39d4bf99,0 0 16px #2bcbb544}}

.metric.is-complete{border-color:#34584f;background:linear-gradient(145deg,#15231f,#111a20);box-shadow:inset 0 0 22px #30cbb10b}.metric.is-complete .label{color:#a0cfc5}.metric.is-complete strong{color:#c8f0e8}

.target-actions{display:flex;align-items:center;gap:8px}.restore-targets{border:1px solid #34444d;background:#142129;color:#b4c2c6;border-radius:7px;padding:7px 9px;font:600 9px Manrope,sans-serif;white-space:nowrap;cursor:pointer}.restore-targets:hover{border-color:#46cdb9;color:#74e3d4}@media(max-width:480px){.target-actions{flex-direction:column;align-items:flex-end;gap:5px}.restore-targets{font-size:8px;padding:6px 8px}}

.server-picker{display:flex;flex-direction:column;gap:5px;min-width:170px}.server-picker>span{font:500 8px 'DM Mono',monospace;letter-spacing:.1em;color:#82949a}.server-picker select{width:100%;border:1px solid #34444d;border-radius:7px;background:#111d24;color:#e3eff0;padding:9px 28px 9px 10px;font:600 10px Manrope,sans-serif;outline:none}.server-picker select:focus{border-color:#44d6c0}.target-row.selected{background:#16302955;box-shadow:inset 2px 0 #36d6bd}.select-target{border:1px solid #2e4747;background:#14231f;color:#9cd7cb;border-radius:6px;padding:5px 7px;font:600 8px Manrope,sans-serif;white-space:nowrap;cursor:pointer}.select-target:hover:not(:disabled){border-color:#46d4bd;color:#d0fff5}.select-target:disabled{opacity:.8;cursor:default}.target-row.selected .target-name{color:#c6fff2}@media(max-width:720px){.status-actions{display:grid;grid-template-columns:1fr 1fr}.server-picker{grid-column:1/-1;min-width:0}.status-actions .button{width:100%}.target-row{gap:6px}.select-target{padding:5px 6px;font-size:8px}}

.chart-card.is-monitoring{border-color:#36d6bd88;box-shadow:0 0 0 1px #36d6bd33,0 0 26px #36d6bd20,inset 0 0 28px #36d6bd0b;animation:chart-monitor-glow 1.8s ease-in-out infinite alternate}.chart-card.is-monitoring .chart-head>.label,.chart-card.is-monitoring #chartHint{color:#a6e8dd}.chart-card.has-loss{animation:chart-loss-flash .35s ease-in-out 4;border-color:#ff626b;box-shadow:0 0 0 2px #ff626b99,0 0 32px #ff626b66,inset 0 0 30px #ff626b22}@keyframes chart-monitor-glow{from{box-shadow:0 0 0 1px #36d6bd22,0 0 12px #36d6bd15,inset 0 0 15px #36d6bd07}to{box-shadow:0 0 0 1px #36d6bd66,0 0 28px #36d6bd30,inset 0 0 28px #36d6bd12}}@keyframes chart-loss-flash{0%,100%{border-color:#ff626b;box-shadow:0 0 0 2px #ff626b99,0 0 32px #ff626b66,inset 0 0 30px #ff626b22}50%{border-color:#29383e;box-shadow:none}}@media(prefers-reduced-motion:reduce){.chart-card.is-monitoring,.chart-card.has-loss{animation:none}.chart-card.has-loss{border-color:#ff626b;box-shadow:0 0 0 2px #ff626b99}}

.interval-picker{display:flex;flex-direction:column;gap:5px;min-width:92px}.interval-picker>span{font:500 8px 'DM Mono',monospace;letter-spacing:.1em;color:#82949a}.interval-picker select{width:100%;border:1px solid #34444d;border-radius:7px;background:#111d24;color:#e3eff0;padding:9px 8px;font:600 10px Manrope,sans-serif;outline:none}.interval-picker select:focus{border-color:#44d6c0}@media(max-width:720px){.interval-picker{grid-column:1/-1;min-width:0}}

.chart-card.is-monitoring{animation:none;box-shadow:0 0 0 1px #36d6bd55,inset 0 0 24px #36d6bd12}body.monitoring .metric.is-measuring{animation:none;box-shadow:0 0 0 1px #39d4bf66,0 0 14px #2bcbb526,inset 0 0 14px #25d2b91c}

.status-actions{align-items:flex-end;flex-shrink:0}.status-actions .button{flex:0 0 106px;width:106px;min-width:106px;height:54px;padding:7px 6px;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.2;white-space:normal}.status-actions .button span{margin:0 5px 0 0}@media(max-width:720px){.status-actions .button{flex:1 1 0;width:100%;min-width:0;height:54px;padding:7px 6px}}

.monitor-controls{display:flex;align-items:flex-end;justify-content:flex-end;gap:9px;margin:13px 0 4px;padding-top:12px;border-top:1px solid #ffffff0a}.monitor-controls .server-picker{min-width:190px}.monitor-controls .button{flex:0 0 148px;width:148px;min-width:148px;height:38px;padding:7px 10px;white-space:nowrap}.monitor-controls .interval-picker{min-width:92px}@media(max-width:720px){.status-actions #quickBtn{grid-column:1/-1}.monitor-controls{display:grid;grid-template-columns:1fr 1fr;gap:9px}.monitor-controls .server-picker{grid-column:1/-1;min-width:0}.monitor-controls .interval-picker{grid-column:auto;min-width:0}.monitor-controls .button{grid-column:auto;width:100%;min-width:0;height:42px;white-space:normal}}

/* SimplishLab app layout, with Caiu? colors */
.topbar{min-height:76px;height:auto;padding:8px clamp(18px,4vw,56px);gap:20px;background:linear-gradient(180deg,#17232b 0%,#0e171e 100%);border-bottom-color:#2a3941}
.topbar .brand{display:inline-flex;align-items:center;flex:0 0 auto;width:190px;min-width:0}
.topbar .brand img{display:block;width:100%;height:auto}
.topbar .powered{gap:10px;flex:0 0 auto}
.topbar .powered span{font-size:9px;font-weight:800;letter-spacing:.12em}
.topbar .powered img{display:block;width:136px;height:auto}
.layout{width:min(1480px,calc(100% - 48px));padding:20px 0 24px}
.intro{display:flex;align-items:end;justify-content:space-between;gap:14px 28px;margin-bottom:16px}
.intro h1{font-size:clamp(23px,2.2vw,32px);line-height:1.15;letter-spacing:-.04em;margin:8px 0 0}
.intro>p{max-width:560px;margin:0 0 2px;font-size:12px;line-height:1.5}
.status-card{padding:16px 20px;gap:18px}
.status-main{min-width:0}
.status-main>div:last-child{min-width:0}
.status-main p{line-height:1.45}
.metrics{margin:12px 0;gap:12px}
.metric{padding:15px 16px;min-height:120px}
.metric .benchmark{min-height:0}
.chart-card{padding:18px 20px 12px}
.chart-wrap{height:clamp(250px,34vh,430px);margin-top:8px}
.monitor-controls{margin-top:10px;padding-top:10px}
.lower-grid{margin-top:12px;grid-template-columns:1.1fr .9fr}
.targets-card,.history-card{padding:16px 18px}
.note{margin-top:12px}
@media(max-width:980px){.intro{align-items:start;flex-direction:column;gap:6px}.intro>p{max-width:none}.lower-grid{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.topbar{min-height:64px;padding:7px 16px}.topbar .brand{width:146px}.topbar .powered{gap:6px}.topbar .powered img{width:92px}.topbar .powered span{display:block;font-size:7px}.layout{width:calc(100% - 28px);padding-top:18px}.intro{margin-bottom:13px}.intro h1{font-size:25px}.intro>p{font-size:11px}.status-card{padding:16px}.metrics{gap:9px}.metric{min-height:112px;padding:13px}.chart-card{padding:16px 14px 12px}.chart-wrap{height:240px}.lower-grid{grid-template-columns:1fr}.targets-card,.history-card{padding:16px}}
@media(max-width:380px){.topbar .brand{width:125px}.topbar .powered img{width:76px}.topbar .powered span{font-size:6px}.intro h1{font-size:23px}}

.monitor-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 18px;margin-bottom:10px}
.monitor-toolbar-title{display:flex;flex-direction:column;gap:4px;flex:0 0 auto}
.monitor-toolbar-title strong{font-size:12px;font-weight:700}
.monitor-toolbar .monitor-controls{margin:0;padding:0;border:0;flex:1}
.chart-wrap{height:clamp(170px,calc(100dvh - 640px),320px)}
@media(max-width:900px){.monitor-toolbar{align-items:flex-start;flex-direction:column;gap:9px}.monitor-toolbar .monitor-controls{width:100%;justify-content:flex-start}.chart-wrap{height:clamp(170px,calc(100dvh - 690px),270px)}}
@media(max-width:720px){.monitor-toolbar{padding:14px}.monitor-toolbar .monitor-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.chart-wrap{height:clamp(180px,30dvh,250px)}}
@media(min-width:721px) and (max-height:980px){.layout{padding-top:12px}.intro{margin-bottom:9px}.intro h1{margin-top:3px}.status-card{padding:11px 16px}.metrics{margin:8px 0}.metric{min-height:102px;padding:10px 13px}.metric>div{margin:7px 0 2px}.metric strong{font-size:24px}.metric .benchmark{margin-top:4px}.monitor-toolbar{padding:8px 14px;margin-bottom:7px}.chart-card{padding:12px 16px 8px}.chart-wrap{margin-top:4px}}
