:root{
  --bg:#070b16; --bg-2:#0a1020; --panel:#0e1626; --panel-2:#111b2e;
  --ink:#eef2f8; --muted:#8a96ad; --faint:#5a6478;
  --moon:#f3ede0; --moon-shade:#cfc8b8; --glow:#f7e9c9;
  --accent:#7bd3ff; --gold:#ffd27d;
  --line:rgba(255,255,255,0.08); --line-strong:rgba(255,255,255,0.14);
  --ok:#5fd38a; --warn:#f5c764; --err:#f1857d; --r:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Manrope',sans-serif;background:var(--bg);color:var(--ink);line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit}

/* backdrop */
.sky{position:fixed;inset:0;z-index:-2;background:
  radial-gradient(1200px 700px at 80% -10%, rgba(123,211,255,0.10), transparent 60%),
  radial-gradient(900px 600px at 10% 110%, rgba(255,210,125,0.07), transparent 55%),
  linear-gradient(180deg,#070b16 0%, #060912 60%, #04060d 100%);}
#stars{position:fixed;inset:0;z-index:-1;pointer-events:none}
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* moon */
.moon-wrap{position:relative;display:inline-grid;place-items:center}
.moon-glow{position:absolute;border-radius:50%;filter:blur(6px);
  background:radial-gradient(circle, rgba(247,233,201,0.55), rgba(247,233,201,0.12) 45%, transparent 70%);}
.moon-spin{animation:spin 44s linear infinite;transform-origin:center}
@keyframes spin{to{transform:rotate(360deg)}}
.orbit{position:absolute;border:1px solid rgba(123,211,255,0.18);border-radius:50%;animation:orbit 18s linear infinite}
.orbit::after{content:"";position:absolute;top:-4px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}
@keyframes orbit{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.moon-spin,.orbit{animation:none}}

/* layout */
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.btn{font-family:'Manrope';font-weight:600;font-size:.95rem;cursor:pointer;text-decoration:none;display:inline-block;text-align:center;
  border:1px solid var(--line-strong);background:transparent;color:var(--ink);padding:.7rem 1.3rem;border-radius:999px;transition:.25s}
.btn:hover{border-color:var(--glow);color:var(--glow);box-shadow:0 0 24px rgba(247,233,201,.15)}
.btn.solid{background:linear-gradient(180deg,#f7efdd,#e8dcc0);color:#1a1407;border-color:transparent}
.btn.solid:hover{box-shadow:0 8px 30px rgba(247,233,201,.25);transform:translateY(-1px);color:#1a1407}
.eyebrow{font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--accent)}

/* nav */
nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:18px 28px;backdrop-filter:blur(12px);background:rgba(7,11,22,0.55);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px;cursor:pointer;text-decoration:none}
.brand .name{font-family:'Fraunces';font-weight:500;font-size:1.3rem}
.brand .name b{color:var(--glow);font-weight:600}
.navlinks{display:flex;align-items:center;gap:30px}
.navlinks a{color:var(--muted);text-decoration:none;font-size:.92rem;font-weight:500;transition:.2s}
.navlinks a:hover{color:var(--ink)}
.navlinks a.btn{color:var(--ink)}
@media(max-width:760px){.navlinks .hideph{display:none}}

/* hero */
.hero{position:relative;padding:90px 0 70px;text-align:center}
.hero h1{font-family:'Fraunces';font-weight:400;font-size:clamp(2.6rem,7vw,5.2rem);line-height:1.02;letter-spacing:-.01em;margin:30px auto 22px;max-width:14ch}
.hero h1 em{font-style:italic;color:var(--glow)}
.hero p.lede{color:var(--muted);font-size:clamp(1rem,2vw,1.25rem);max-width:54ch;margin:0 auto 38px}
.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero-moon{margin:0 auto 8px}
.rise{opacity:0;transform:translateY(20px);animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
.rise.d1{animation-delay:.05s}.rise.d2{animation-delay:.18s}.rise.d3{animation-delay:.32s}.rise.d4{animation-delay:.46s}
@keyframes rise{to{opacity:1;transform:none}}

/* feature band */
.band{padding:60px 0 30px;border-top:1px solid var(--line)}
.band-head{max-width:60ch}
.band-head h2{font-family:'Fraunces';font-weight:400;font-size:clamp(1.8rem,4vw,2.7rem);margin:14px 0}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:42px}
@media(max-width:820px){.cards{grid-template-columns:1fr}}
.card{background:linear-gradient(180deg,var(--panel),var(--bg-2));border:1px solid var(--line);border-radius:var(--r);padding:26px;transition:.3s}
.card:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.card .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;margin-bottom:18px;background:rgba(123,211,255,.08);border:1px solid rgba(123,211,255,.2);color:var(--accent)}
.card h3{font-family:'Fraunces';font-weight:500;font-size:1.25rem;margin-bottom:8px}
.card p{color:var(--muted);font-size:.95rem}
footer{margin-top:80px;border-top:1px solid var(--line);padding:34px 0;display:flex;justify-content:space-between;align-items:center;color:var(--faint);font-size:.85rem;flex-wrap:wrap;gap:12px}
footer .mono{font-family:'JetBrains Mono';font-size:.78rem;letter-spacing:.05em}

/* auth */
.auth{min-height:100vh;display:grid;place-items:center;padding:40px 20px}
.auth-card{width:100%;max-width:420px;background:linear-gradient(180deg,var(--panel),var(--bg-2));border:1px solid var(--line);border-radius:24px;padding:42px 38px;box-shadow:0 30px 80px rgba(0,0,0,.5);text-align:center;position:relative}
.auth-card h2{font-family:'Fraunces';font-weight:400;font-size:1.9rem;margin:22px 0 4px}
.auth-card .sub{color:var(--muted);font-size:.92rem;margin-bottom:30px}
.field{text-align:left;margin-bottom:18px}
.field label{display:block;font-size:.78rem;letter-spacing:.04em;color:var(--muted);margin-bottom:7px;text-transform:uppercase;font-family:'JetBrains Mono';font-weight:500}
.field input{width:100%;background:rgba(255,255,255,.03);border:1px solid var(--line-strong);border-radius:11px;padding:.85rem 1rem;color:var(--ink);font-family:'Manrope';font-size:.98rem;transition:.2s}
.field input:focus{outline:none;border-color:var(--glow);box-shadow:0 0 0 3px rgba(247,233,201,.1);background:rgba(255,255,255,.05)}
.auth-card .btn.solid{width:100%;margin-top:6px;padding:.9rem}
.auth-foot{margin-top:24px;font-size:.86rem;color:var(--muted)}
.backlink{position:absolute;top:20px;left:22px;color:var(--faint);font-size:.82rem;cursor:pointer;text-decoration:none;transition:.2s}
.backlink:hover{color:var(--ink)}
.alert{background:rgba(241,133,125,.1);border:1px solid rgba(241,133,125,.35);color:#ffb4ad;border-radius:11px;padding:.7rem 1rem;font-size:.88rem;margin-bottom:20px;text-align:left}

/* dashboard */
.dash{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
@media(max-width:880px){.dash{grid-template-columns:1fr}.side{display:none}}
.side{border-right:1px solid var(--line);padding:24px 18px;background:rgba(8,12,22,.6);position:sticky;top:0;height:100vh}
.side .brand{margin-bottom:36px;padding:0 6px}
.side .brand .name{font-size:1.1rem}
.navg{display:flex;flex-direction:column;gap:4px}
.navg a{display:flex;align-items:center;gap:11px;padding:.65rem .8rem;border-radius:10px;color:var(--muted);text-decoration:none;font-size:.92rem;font-weight:500;cursor:pointer;transition:.2s}
.navg a:hover{background:rgba(255,255,255,.04);color:var(--ink)}
.navg a.on{background:rgba(123,211,255,.08);color:var(--ink);border:1px solid rgba(123,211,255,.18)}
.side .out{position:absolute;bottom:24px;left:18px;right:18px}
.side .who{font-size:.85rem;color:var(--ink);margin-bottom:12px;padding:0 4px}
.side .who small{display:block;color:var(--faint);font-size:.74rem;font-family:'JetBrains Mono';margin-top:2px;word-break:break-all}

.main{padding:30px 36px 60px}
@media(max-width:560px){.main{padding:24px 18px}}
.topbar{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:14px;margin-bottom:30px}
.topbar h1{font-family:'Fraunces';font-weight:400;font-size:1.9rem}
.topbar .stamp{font-family:'JetBrains Mono';font-size:.76rem;color:var(--faint);letter-spacing:.04em}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:30px}
@media(max-width:780px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:linear-gradient(180deg,var(--panel),var(--bg-2));border:1px solid var(--line);border-radius:14px;padding:20px}
.stat .k{font-family:'JetBrains Mono';font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.stat .v{font-family:'Fraunces';font-size:2.1rem;font-weight:400;margin-top:6px;line-height:1}
.stat .d{font-size:.78rem;margin-top:8px;color:var(--ok);font-family:'JetBrains Mono'}
.stat .d.warn{color:var(--warn)}
.panel{background:linear-gradient(180deg,var(--panel),var(--bg-2));border:1px solid var(--line);border-radius:16px;overflow:hidden}
.panel .ph{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--line)}
.panel .ph h3{font-family:'Fraunces';font-weight:500;font-size:1.15rem}
.panel .ph .mono{font-family:'JetBrains Mono';font-size:.74rem;color:var(--faint);letter-spacing:.06em}
table{width:100%;border-collapse:collapse}
thead th{text-align:left;font-family:'JetBrains Mono';font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);padding:14px 22px;border-bottom:1px solid var(--line);font-weight:500}
tbody td{padding:16px 22px;border-bottom:1px solid var(--line);font-size:.92rem;vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:.15s}
tbody tr:hover{background:rgba(255,255,255,.025)}
.proj{font-family:'Fraunces';font-weight:500;font-size:1.02rem}
.proj small{display:block;font-family:'Manrope';font-weight:400;color:var(--faint);font-size:.78rem;margin-top:2px}
.pill{display:inline-flex;align-items:center;gap:7px;font-family:'JetBrains Mono';font-size:.74rem;padding:.3rem .7rem;border-radius:999px;border:1px solid var(--line-strong)}
.dot{width:7px;height:7px;border-radius:50%}
.pill.live{color:var(--ok);border-color:rgba(95,211,138,.3);background:rgba(95,211,138,.06)}
.pill.live .dot{background:var(--ok);box-shadow:0 0 8px var(--ok)}
.pill.prog{color:var(--accent);border-color:rgba(123,211,255,.3);background:rgba(123,211,255,.06)}
.pill.prog .dot{background:var(--accent);box-shadow:0 0 8px var(--accent)}
.pill.maint{color:var(--warn);border-color:rgba(245,199,100,.3);background:rgba(245,199,100,.06)}
.pill.maint .dot{background:var(--warn);box-shadow:0 0 8px var(--warn)}
.uptime{font-family:'JetBrains Mono';font-size:.9rem;color:var(--ink)}
.bar{height:6px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden;width:120px}
.bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--glow));transition:width .6s ease}
.pct{font-family:'JetBrains Mono';font-size:.78rem;color:var(--muted);margin-top:5px;display:block}
.grid2{display:grid;grid-template-columns:1.6fr 1fr;gap:18px;margin-top:18px}
@media(max-width:880px){.grid2{grid-template-columns:1fr}}
.feed{padding:8px 0}
.feed li{list-style:none;display:flex;gap:12px;padding:13px 22px;border-bottom:1px solid var(--line);font-size:.88rem}
.feed li:last-child{border:none}
.feed .t{font-family:'JetBrains Mono';font-size:.72rem;color:var(--faint);white-space:nowrap;min-width:54px}
.feed .c{color:var(--muted)}
.feed .c b{color:var(--ink);font-weight:600}

/* ---------- CRUD: messages, forms, management ---------- */
.flash{background:rgba(95,211,138,.1);border:1px solid rgba(95,211,138,.35);color:#aef0c6;border-radius:11px;padding:.75rem 1rem;font-size:.9rem;margin-bottom:20px}
.errors{background:rgba(241,133,125,.1);border:1px solid rgba(241,133,125,.35);color:#ffb4ad;border-radius:11px;padding:.7rem 1.1rem;font-size:.88rem;margin-bottom:20px}
.errors ul{margin:0;padding-left:1.1rem}
.errors li{margin:.15rem 0}

.topbar .actions{display:flex;gap:10px;align-items:center}
.btn.sm{padding:.45rem .9rem;font-size:.85rem}
.btn.danger{border-color:rgba(241,133,125,.4);color:#ffb4ad}
.btn.danger:hover{border-color:var(--err);color:#fff;background:rgba(241,133,125,.15);box-shadow:none}

.ph-right{display:flex;align-items:center;gap:16px}
.ph-link{color:var(--accent);text-decoration:none;font-size:.84rem;font-weight:600;transition:.2s}
.ph-link:hover{color:var(--glow)}
.muted-link{cursor:default;opacity:.5}
.muted-link:hover{background:none!important;color:var(--muted)!important}

th.right,td.right{text-align:right}
.actions-cell{display:flex;gap:8px;justify-content:flex-end}
.actions-cell form{display:inline;margin:0}

.form-card{background:linear-gradient(180deg,var(--panel),var(--bg-2));border:1px solid var(--line);border-radius:16px;padding:30px 30px 26px;max-width:780px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 22px}
@media(max-width:620px){.form-grid{grid-template-columns:1fr}}
.field.full{grid-column:1 / -1}
.field select{width:100%;background:rgba(255,255,255,.03);border:1px solid var(--line-strong);border-radius:11px;padding:.85rem 1rem;color:var(--ink);font-family:'Manrope';font-size:.98rem;appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a96ad' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center}
.field select:focus{outline:none;border-color:var(--glow);box-shadow:0 0 0 3px rgba(247,233,201,.1)}
.field select option{background:#0e1626;color:var(--ink)}
.field input[type=number],.field input[type=datetime-local]{font-family:'JetBrains Mono';font-size:.92rem}
.field .hint{font-size:.7rem;color:var(--faint);margin-top:6px;font-family:'JetBrains Mono'}
.form-foot{display:flex;gap:12px;margin-top:18px}

/* ---------- Uptime monitoring ---------- */
.pill.down{color:var(--err);border-color:rgba(241,133,125,.35);background:rgba(241,133,125,.07)}
.pill.down .dot{background:var(--err);box-shadow:0 0 8px var(--err)}
.pill.unknown{color:var(--faint);border-color:var(--line-strong)}
.pill.unknown .dot{background:var(--faint)}

.monitor-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:18px}
.monitor-card{background:linear-gradient(180deg,var(--panel),var(--bg-2));border:1px solid var(--line);border-radius:16px;padding:22px}
.mc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:18px}
.mc-name{font-family:'Fraunces';font-weight:500;font-size:1.18rem}
.mc-url{display:inline-block;margin-top:3px;font-family:'JetBrains Mono';font-size:.72rem;color:var(--accent);text-decoration:none;max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.mc-url:hover{color:var(--glow)}
.mc-url.muted{color:var(--faint)}
.mc-stats{display:flex;gap:22px;margin-bottom:16px}
.mc-stats>div{display:flex;flex-direction:column;gap:3px}
.mc-k{font-family:'JetBrains Mono';font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.mc-v{font-family:'JetBrains Mono';font-size:1.02rem;color:var(--ink)}
.spark{display:flex;align-items:flex-end;gap:3px;height:48px;padding:6px 0;border-top:1px solid var(--line);margin-bottom:14px}
.spark i{flex:1;min-width:2px;border-radius:2px 2px 0 0;opacity:.85;transition:.2s}
.spark i.ok{background:linear-gradient(180deg,var(--accent),rgba(123,211,255,.35))}
.spark i.down{background:var(--err)}
.spark i:hover{opacity:1}
.spark.empty{align-items:center;justify-content:center;color:var(--faint);font-size:.8rem;font-family:'JetBrains Mono'}
.mc-foot{margin:0}
.monitor-note{margin-top:24px;color:var(--faint);font-size:.84rem;max-width:70ch}
.monitor-note code{font-family:'JetBrains Mono';font-size:.8rem;color:var(--accent);background:rgba(123,211,255,.08);padding:.1rem .4rem;border-radius:5px}

/* ---------- Tools page ---------- */
.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px}

/* The Pool. — a rounded square that looks like an ocean */
.pool-btn{
  position:relative;display:block;width:200px;height:200px;border-radius:30px;
  overflow:hidden;text-decoration:none;isolation:isolate;cursor:pointer;
  border:1px solid rgba(170,225,255,.25);
  box-shadow:0 18px 44px rgba(3,28,52,.55), inset 0 1px 0 rgba(255,255,255,.15);
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;
}
.pool-btn:hover{transform:translateY(-4px) scale(1.015);
  box-shadow:0 26px 60px rgba(3,28,52,.6), inset 0 1px 0 rgba(255,255,255,.22)}
.pool-btn:active{transform:translateY(-1px) scale(.995)}

/* deep-water base gradient */
.pool-water{position:absolute;inset:0;
  background:linear-gradient(180deg,#7fe3ff 0%, #2bb4e8 26%, #1377c4 56%, #0a4f9e 80%, #06346f 100%);}

/* drifting wave bands — different sizes, speeds, directions */
.pool-wave{position:absolute;left:-50%;width:200%;height:60%;opacity:.55;
  border-radius:42%;mix-blend-mode:screen;}
.pool-wave.w1{top:8%;background:radial-gradient(60% 80% at 50% 50%, rgba(190,240,255,.55), transparent 70%);
  animation:poolDrift 9s linear infinite, poolBob 6s ease-in-out infinite;}
.pool-wave.w2{top:34%;height:70%;opacity:.4;background:radial-gradient(60% 80% at 50% 50%, rgba(120,210,255,.6), transparent 72%);
  animation:poolDriftR 13s linear infinite, poolBob 7.5s ease-in-out infinite;}
.pool-wave.w3{top:58%;height:80%;opacity:.5;background:radial-gradient(60% 80% at 50% 50%, rgba(40,150,220,.7), transparent 75%);
  animation:poolDrift 17s linear infinite, poolBob 9s ease-in-out infinite;}
@keyframes poolDrift{from{transform:translateX(-12%) rotate(0deg)}to{transform:translateX(12%) rotate(360deg)}}
@keyframes poolDriftR{from{transform:translateX(12%) rotate(0deg)}to{transform:translateX(-12%) rotate(-360deg)}}
@keyframes poolBob{0%,100%{margin-top:0}50%{margin-top:-7px}}

/* roaming sun/moon glints on the surface */
.pool-glint{position:absolute;border-radius:50%;filter:blur(7px);mix-blend-mode:screen;}
.pool-glint.g1{width:70px;height:70px;background:radial-gradient(circle,rgba(255,255,255,.85),transparent 65%);
  animation:poolGlint1 11s ease-in-out infinite;}
.pool-glint.g2{width:42px;height:42px;background:radial-gradient(circle,rgba(220,250,255,.7),transparent 68%);
  animation:poolGlint2 8s ease-in-out infinite;}
@keyframes poolGlint1{0%{top:18%;left:14%}50%{top:30%;left:60%}100%{top:18%;left:14%}}
@keyframes poolGlint2{0%{top:62%;left:70%}50%{top:50%;left:22%}100%{top:62%;left:70%}}

/* surface shimmer sweep */
.pool-shimmer{position:absolute;inset:0;mix-blend-mode:screen;opacity:.5;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 48%,transparent 62%);
  background-size:250% 250%;animation:poolShimmer 7s ease-in-out infinite;}
@keyframes poolShimmer{0%{background-position:120% 0}100%{background-position:-40% 0}}

/* faint caustic ripples near the surface */
.pool-caustics{position:absolute;inset:0;opacity:.18;mix-blend-mode:overlay;
  background:
    radial-gradient(circle at 25% 22%, rgba(255,255,255,.9) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 16%, rgba(255,255,255,.8) 0 2px, transparent 3px),
    radial-gradient(circle at 50% 30%, rgba(255,255,255,.7) 0 1.5px, transparent 3px);
  background-size:90px 90px;animation:poolDrift 14s linear infinite;}

/* label */
.pool-label{position:absolute;left:0;right:0;bottom:16px;text-align:center;z-index:2;
  font-family:'Fraunces';font-weight:500;font-size:1.5rem;color:#fff;letter-spacing:.01em;
  text-shadow:0 2px 10px rgba(2,30,60,.65), 0 0 2px rgba(2,30,60,.4);}

@media (prefers-reduced-motion:reduce){
  .pool-wave,.pool-glint,.pool-shimmer,.pool-caustics{animation:none}
}