/* Flip Retail brand: colours, logo mark and typefaces are taken from flipretail.in. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(brand/inter-latin.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500 700;font-display:swap;src:url(brand/space-grotesk-latin.woff2) format('woff2')}
:root{
  color-scheme:light;
  --body:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --display:'Space Grotesk',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --bar:#04161C; --bar-ink:#E7F1F2; --bar-ink2:#B8CDD1; --bar-line:rgba(150,195,205,.26); --bar-accent:#4FE0C8;
  --page:#EEF4F4; --surface:#FBFDFD; --ink:#062830; --ink2:#33555D; --muted:#4C6E76;
  --hair:rgba(12,60,72,.12); --axis:rgba(12,60,72,.28); --ring:rgba(12,60,72,.14); --wash:rgba(12,60,72,.05);
  --accent:#0F7A6B; --accent-hover:#0B6357; --on-accent:#fff; --link:#0F7A6B;
  --meter:#0F7A6B; --meter-track:#CDE5E1;
  /* Status colours are kept apart from the brand accent and always come with an icon. */
  --good:#0ca30c; --warning:#fab219; --critical:#d03b3b;
  --shadow:0 10px 36px rgba(4,22,28,.18);
}
@media (prefers-color-scheme:dark){
  :root{
    color-scheme:dark;
    --page:#051C24; --surface:#07222A; --ink:#E7F1F2; --ink2:#B8CDD1; --muted:#8AA5AB;
    --hair:rgba(150,195,205,.14); --axis:rgba(150,195,205,.30); --ring:rgba(150,195,205,.16); --wash:rgba(150,195,205,.06);
    --accent:#2BB9A4; --accent-hover:#4FE0C8; --on-accent:#04161C; --link:#4FE0C8;
    --meter:#2BB9A4; --meter-track:#0C3C48; --shadow:0 10px 36px rgba(0,0,0,.6);
  }
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--page);color:var(--ink);font:15px/1.5 var(--body)}
a{color:var(--link);text-decoration:none} a:hover{text-decoration:underline}
h1{font-family:var(--display);font-size:25px;line-height:1.25;margin:0;font-weight:600;letter-spacing:-.015em}
h2{font-family:var(--display);font-size:16.5px;margin:0 0 8px;font-weight:600;letter-spacing:-.01em}
p{margin:0 0 12px}
.sub{color:var(--ink2)} .muted{color:var(--muted)} .small{font-size:13px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:900px;margin:0 auto;padding:0 20px}
.grow{flex:1}

.topbar{position:sticky;top:0;z-index:20;background:var(--bar);border-bottom:1px solid var(--bar-line)}
.topbar .wrap{display:flex;align-items:center;gap:30px;height:56px}
.brand{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;color:var(--bar-ink)}
.brand:hover{text-decoration:none}
.brand .mark{width:30px;height:30px;display:grid;place-items:center;flex:none;border-radius:8px;color:#EAF6F5;background:linear-gradient(145deg,#1B5C6B,#062731);border:1px solid rgba(150,205,215,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
.brand .mark svg{width:17px;height:auto}
.brand .word{font-family:var(--display);font-weight:700;font-size:16.5px;letter-spacing:-.015em}
.brand .product{font-size:13px;color:var(--bar-ink2);padding-left:11px;border-left:1px solid var(--bar-line)}
.brand.big{gap:12px} .brand.big .mark{width:40px;height:40px;border-radius:11px} .brand.big .mark svg{width:22px} .brand.big .word{font-size:21px}
.topbar .btn.quiet{color:var(--bar-ink2)} .topbar .btn.quiet:hover{background:rgba(255,255,255,.08);color:var(--bar-ink)}
.topbar .who{color:var(--bar-ink2);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.topbar .demo{font-size:12px;font-weight:600;color:var(--bar);background:var(--bar-accent);border-radius:20px;padding:1px 9px}
.pagetools{float:right;display:flex;align-items:center;gap:10px;margin-top:2px}
.pagetools .btn{display:inline-flex;align-items:center;gap:7px}
.buildbar{background:var(--surface);border-bottom:1px solid var(--ring);font-size:14px;color:var(--ink)}
.buildbar .wrap{display:flex;align-items:center;gap:10px;min-height:42px;padding-top:8px;padding-bottom:8px}
.buildbar .spin{flex:none} .buildbar .what{flex:1;min-width:0} .buildbar .linkbtn{font-size:14px;margin-left:6px} .buildbar .hint{white-space:nowrap}
@media (max-width:700px){.buildbar .hint{display:none} .buildbar .wrap{align-items:flex-start} .buildbar .spin{margin-top:3px}}
.nav{display:flex;gap:22px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none} .nav::-webkit-scrollbar{display:none} .nav a{white-space:nowrap}
@media (max-width:700px){.topbar .wrap{gap:16px} .topbar .product,.topbar .who{display:none}}
.nav a{color:var(--bar-ink2);font-weight:550;padding:16px 0 14px;border-bottom:2px solid transparent}
.nav a:hover{color:var(--bar-ink);text-decoration:none}
.nav a.on{color:var(--bar-ink);border-bottom-color:var(--bar-accent)}
main{padding:32px 0 80px}

.btn{font:inherit;font-weight:600;font-size:14px;border-radius:8px;border:1px solid var(--axis);background:var(--surface);color:var(--ink);padding:7px 14px;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--wash);text-decoration:none}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)} .btn.primary:hover{background:var(--accent-hover)}
.btn.danger{background:var(--critical);border-color:var(--critical);color:#fff}
.btn.sm{padding:4px 11px;font-size:13px}
.btn.wide{width:100%}
.btn.quiet{border-color:transparent;background:none;color:var(--ink2)} .btn.quiet:hover{background:var(--wash)}
.btn.dots{padding:2px 9px;font-size:18px;line-height:1.2;letter-spacing:1px}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btns{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.linkbtn{font:inherit;font-size:13px;background:none;border:0;padding:0;color:var(--link);cursor:pointer} .linkbtn:hover{text-decoration:underline}
input[type=text],input[type=email],input[type=password],select{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--axis);border-radius:8px;padding:7px 10px}
input:focus,select:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--meter);outline-offset:1px}
label.f{display:block;font-size:13px;color:var(--ink2);margin-bottom:4px;font-weight:550}
.field{margin-bottom:14px} .field input,.field select{width:100%}
.code{letter-spacing:4px} .code::placeholder{letter-spacing:normal}
.err{background:rgba(208,59,59,.10);border:1px solid var(--critical);border-radius:8px;padding:8px 11px;margin:0 0 14px;font-size:14px}

.ico{display:inline-flex;flex:none} .ico svg{width:18px;height:18px}
.ok svg{color:var(--good)} .warn svg{color:var(--warning)} .bad svg{color:var(--critical)} .off svg{color:var(--muted)}
.tag{font-size:12px;font-weight:600;padding:1px 8px;border-radius:20px;border:1px solid var(--axis);color:var(--ink2);white-space:nowrap}
.tag.new{border-color:var(--accent);color:var(--accent)}
.tag.bad{border-color:var(--critical);color:var(--ink)}

.lead{display:flex;gap:10px;align-items:center;font-size:17px;margin-top:10px}
.lead .ico svg{width:22px;height:22px}
.notice{display:flex;gap:8px;align-items:center;margin-top:8px;color:var(--ink2);font-size:14px}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:26px}
@media (max-width:760px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:480px){.tiles{grid-template-columns:1fr}}
.tile{display:flex;gap:11px;align-items:center;background:var(--surface);border:1px solid var(--ring);border-radius:12px;padding:16px 18px;color:var(--ink);font-size:15.5px}
.tile:hover{text-decoration:none;border-color:var(--axis)}
.tile b{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.list{background:var(--surface);border:1px solid var(--ring);border-radius:12px}
.list > :first-child{border-top:0;border-radius:12px 12px 0 0}
.row{display:flex;align-items:center;gap:11px;padding:11px 12px 11px 18px;border-top:1px solid var(--hair);min-height:52px}
.row.padded{padding-right:18px}
.row .nm{font-weight:650;color:var(--ink)}
.row .dom{font-size:13.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.row .upd{font-size:13.5px;color:var(--ink2);white-space:nowrap}
.more{position:relative}
.menu{position:absolute;right:0;top:calc(100% + 4px);z-index:30;background:var(--surface);border:1px solid var(--ring);border-radius:10px;box-shadow:var(--shadow);min-width:180px;padding:5px}
.menu a,.menu button{display:block;width:100%;text-align:left;font:inherit;font-size:14px;background:none;border:0;padding:7px 10px;border-radius:6px;color:var(--ink);cursor:pointer}
.menu a:hover,.menu button:hover{background:var(--wash);text-decoration:none}
.empty{padding:22px 18px;color:var(--ink2)}

.head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:8px 0 22px}
.head.flush{margin-top:0}
.status{display:flex;gap:8px;align-items:center;margin-top:6px;color:var(--ink2);flex-wrap:wrap}
.panel{background:var(--surface);border:1px solid var(--ring);border-radius:12px;padding:18px 20px;margin-bottom:16px}
.changes{list-style:none;margin:0;padding:0}
.changes li{display:flex;justify-content:space-between;gap:14px;padding:6px 0;border-top:1px solid var(--hair)} .changes li:first-child{border-top:0}
.changes .when{color:var(--muted);font-size:13px;white-space:nowrap}
.live{margin-top:14px;padding-top:14px;border-top:1px solid var(--hair);color:var(--ink2);font-size:14px}
.tabs{display:flex;gap:20px;border-bottom:1px solid var(--hair);margin:-4px 0 16px}
.tabs button{font:inherit;font-weight:600;background:none;border:0;border-bottom:2px solid transparent;color:var(--ink2);padding:6px 0 9px;cursor:pointer}
.tabs button.on{color:var(--ink);border-bottom-color:var(--accent)}
.line{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--hair)} .line:first-child{border-top:0}
.line .when{color:var(--muted);font-size:13px;white-space:nowrap}
.line .gap{width:18px;flex:none}
.between{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
dl.facts{display:grid;grid-template-columns:190px 1fr;gap:9px 16px;margin:0} dl.facts dt{color:var(--ink2)} dl.facts dd{margin:0}

.strip{display:flex;gap:2px;align-items:flex-end;height:30px;margin:12px 0 8px}
.strip i{flex:1;min-width:3px;max-width:14px;height:100%;border-radius:2px 2px 0 0;background:var(--good)}
.strip i.bad{background:var(--critical);height:55%}
.strip i:hover{filter:brightness(1.25)}
.tip{position:fixed;z-index:60;background:var(--ink);color:var(--surface);font-size:12.5px;padding:5px 8px;border-radius:6px;pointer-events:none;white-space:nowrap}
table{width:100%;border-collapse:collapse;margin-top:10px} th{font-size:13px;color:var(--ink2);font-weight:600;text-align:left;padding:6px 0;border-bottom:1px solid var(--axis)}
td{padding:7px 0;border-bottom:1px solid var(--hair);font-variant-numeric:tabular-nums}

.servers{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
.servers .panel{margin:0}
@media (max-width:760px){.servers{grid-template-columns:1fr} dl.facts{grid-template-columns:1fr}}
.meter{height:8px;border-radius:4px;background:var(--meter-track);overflow:hidden;margin:5px 0 12px}
.meter i{display:block;height:100%;border-radius:4px;background:var(--meter)}
.mrow{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;color:var(--ink2)}
.dbfacts{display:grid;gap:3px;margin-top:2px} .dbfacts .ico svg{width:14px;height:14px;vertical-align:-2px}

.log{background:#04161C;color:#E7F1F2;border-radius:8px;padding:10px 12px;margin-top:10px;font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;max-height:230px;overflow:auto;white-space:pre-wrap;word-break:break-word}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:40;display:flex;align-items:flex-start;justify-content:center;padding:9vh 16px;overflow:auto}
.modal{background:var(--surface);border:1px solid var(--ring);border-radius:14px;box-shadow:var(--shadow);width:100%;max-width:500px;padding:24px}
.modal h2{font-size:19px;margin-bottom:12px}
.modal .foot{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}
.steps{list-style:none;margin:4px 0 6px;padding:0}
.steps li{display:flex;gap:10px;align-items:center;padding:6px 0}
.steps .ic{width:18px;height:18px;flex:none;display:flex;align-items:center;justify-content:center} .steps .ic svg{width:17px;height:17px}
.spin{width:14px;height:14px;border:2px solid var(--axis);border-top-color:var(--meter);border-radius:50%;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}
.result{display:flex;gap:12px;align-items:flex-start;margin-bottom:10px}
.result .ico svg{width:26px;height:26px} .result b{font-size:16px}
.pick{display:grid;gap:6px;margin:0 0 14px}
.pick label{display:flex;gap:10px;align-items:center;border:1px solid var(--hair);border-radius:9px;padding:9px 12px;cursor:pointer}
.pick label:hover{background:var(--wash)}
details.adv{margin-top:12px;font-size:14px} details.adv summary{color:var(--link);cursor:pointer} details.adv > div{margin-top:10px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}
.grid2 label{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px}
.grid2 select{padding:3px 6px}
.check{display:flex;gap:8px;align-items:center;margin:0 0 14px;font-size:14px}
.linkbox{display:flex;gap:8px} .linkbox input{flex:1;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}

.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:radial-gradient(1100px 620px at 50% -12%,#0C3C48 0%,#04161C 62%)}
.login-box{width:100%;max-width:380px}
.login .brand{display:flex;justify-content:center;margin-bottom:24px}
.login .panel{padding:28px;margin:0}
.qr{display:flex;justify-content:center;margin:6px 0 12px} .qr svg{display:block;width:220px;height:220px;max-width:100%;border-radius:8px;background:#fff}
.key{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;letter-spacing:1px;word-break:break-all}
.stepno{font-weight:650;margin:16px 0 6px} .stepno:first-of-type{margin-top:0}