/* Motion stays short so service operations remain easy to follow. */
:root{--ink:#23372f;--muted:#809087;--line:#e2e9e4;--green:#25745c;--paper:#f6f8f5;--navy:#172c25}
body{background:radial-gradient(ellipse at 95% 0%,#e7efe67a,transparent 50%),var(--paper);letter-spacing:.1px}
button,.brand{position:relative;overflow:hidden;isolation:isolate}
button{border-radius:9px;transition:background .2s,border-color .2s,box-shadow .2s,transform .18s}
button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 3px 10px #2146330a}
button:active:not(:disabled){transform:translateY(1px) scale(.97)}
button:focus-visible,a:focus-visible{outline:3px solid #6eb99e;outline-offset:3px}
.primary{box-shadow:0 3px 9px #25745c18}
.primary:hover:not(:disabled){background:#1d614c;box-shadow:0 5px 16px #25745c25}
.click-ripple{position:absolute;pointer-events:none;border-radius:50%;background:currentColor;opacity:0;z-index:3;animation:ripple .6s ease-out}
@keyframes ripple{0%{transform:scale(0);opacity:.2}100%{transform:scale(1);opacity:0}}
.is-loading:after{content:"";display:inline-block;width:12px;height:12px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;vertical-align:-2px;margin-left:9px;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
header{height:78px;padding:0 34px;background:#ffffffd9;backdrop-filter:blur(16px)}
.brand{gap:13px;font-size:25px;letter-spacing:-1px;border-radius:9px}
.brand-mark{display:grid;place-items:center;width:38px;height:38px;background:var(--green);border-radius:12px;color:#fff;font-size:23px;box-shadow:0 4px 12px #25745c1a}
.brand span{font-size:16px;font-weight:650;letter-spacing:.3px}
.brand .brand-mark{color:white;font-size:23px}
.header-right{gap:13px;font-size:12px;color:#6a7e73}
.avatar{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:#eaf0eb;color:var(--green);font-size:12px;font-weight:700}
.layout{grid-template-columns:232px 1fr;min-height:calc(100vh - 78px)}
aside{background:linear-gradient(170deg,#20372d,#132b24);padding:33px 16px}
.side-title{letter-spacing:1px;color:#9bb3a5;margin-bottom:21px;padding:0 13px;font-size:11px}
.side-title span{padding:0 6px;border:1px solid #59736770;border-radius:4px;font-size:10px}
nav button{padding:15px 13px;margin-bottom:8px;transition:background .2s,transform .18s;color:#acc1b6;border:1px solid transparent;min-height:73px}
nav button.active{background:#ffffff0d;border-color:#ffffff15;box-shadow:inset 3px 0 0 #89c3a3;color:#fff}
nav button:hover:not(:disabled){background:#ffffff10;box-shadow:none;transform:translateX(2px)}
.server-label{font-size:13px;font-weight:600;margin-bottom:5px}
.server-address{font-size:11px;font-family:Consolas,monospace;letter-spacing:.3px}
.connection-dot{width:6px;height:6px;box-shadow:0 0 0 4px #ffffff07;margin-top:6px}
.connection-dot.online{box-shadow:0 0 0 4px #5ace9d12}
.aside-note{border-top-color:#ffffff12;margin-top:36px;padding:21px 13px;color:#87a595;line-height:2;font-size:11px}
main{padding:36px 38px 25px;max-width:1580px}
.heading{margin-bottom:29px}.eyebrow{font-size:9px;letter-spacing:2.3px;color:#779982}
h1{font-size:28px;margin:7px 0;font-weight:650;letter-spacing:-.5px}
.heading p{font-size:12px}.heading>button{font-size:12px;padding:10px 15px;background:#fff}
.metrics{border-radius:12px;box-shadow:0 4px 20px #223b2b03;margin-bottom:28px;overflow:hidden}
.metrics>div{padding:21px 23px}.metrics span{font-size:11px;color:#89968d}
.metrics strong{font-size:22px;font-weight:600;letter-spacing:-.4px;margin-top:9px;font-variant-numeric:tabular-nums}
#metric-online{color:var(--green)}.metrics .metric-caption{font-size:10px;margin-top:5px;color:#a0aca3}
.tabs{gap:29px;margin-bottom:24px}.tabs button{font-size:12px;padding:10px 1px 15px;position:relative;overflow:visible;box-shadow:none!important}
.tabs button.active{border-bottom:0;color:#275f48}
.tabs button.active:after{content:"";height:2px;position:absolute;left:0;right:0;bottom:-1px;border-radius:2px;background:var(--green);animation:tab-line .25s ease-out}
@keyframes tab-line{from{transform:scaleX(.4);opacity:.3}to{transform:scaleX(1);opacity:1}}
.tabs span{background:#e9eee8;font-size:10px;color:#6d8374;padding:2px 6px}
.projects{gap:18px}.project{border-radius:12px;padding:22px 21px;background:linear-gradient(130deg,#fff,#fefefd);box-shadow:0 3px 15px #28493603;transition:transform .22s,box-shadow .22s,border-color .22s}
.projects.arriving .project{animation:card-in .4s both}
.project:nth-child(2){animation-delay:.045s}.project:nth-child(3){animation-delay:.09s}.project:nth-child(4){animation-delay:.13s}
@keyframes card-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.project:hover{border-color:#c6d7cb;box-shadow:0 9px 30px #2849360b;transform:translateY(-2px)}
.project h2{font-size:16px;font-weight:600;letter-spacing:-.3px;margin-bottom:6px}
.project-code{font-size:10px;font-family:Consolas,monospace;color:#929e96}
.badge{padding:4px 9px;letter-spacing:.2px;font-size:10px;font-weight:500}
.badge.running:before,.badge.succeeded:before{content:"";width:4px;height:4px;background:currentColor;border-radius:50%;display:inline-block;margin-right:5px;vertical-align:2px}
.project-data{font-size:11px;gap:10px;border-top-color:#edf1eb;padding:17px 0 20px;margin-top:17px;grid-template-columns:58px 1fr}
.project-data dd{color:#607469;line-height:1.7}.project-data dt{color:#98a39b}
.actions{gap:6px}.actions button{border-radius:7px;padding:6px 9px;font-size:11px}
.readonly{font-size:10px;color:#9aa69e;border-top:1px solid #f0f3ed;padding-top:12px;margin-top:13px}
.discovered{margin-top:32px}.discovered h2{font-size:14px;font-weight:600}.discovered p{font-size:11px;color:#98a59b}
.table-wrap{border-radius:12px}th{background:#fafcf8;color:#8a998d;font-size:11px}td{color:#567062}th,td{padding:16px}
tbody tr{transition:background .18s}tbody tr:hover{background:#f6faf5}
.empty{padding:32px;border:1px dashed #d9e4d9;font-size:12px;background:#f8faf6}
footer{font-size:10px;color:#9ba69e;margin-top:28px}
dialog{border-radius:16px;box-shadow:0 28px 110px #0b251a40}dialog[open]{animation:dialog-in .27s cubic-bezier(.2,.8,.2,1)}
dialog[open]::backdrop{background:#132b256b;backdrop-filter:blur(4px);animation:backdrop-in .25s ease-out}
@keyframes dialog-in{from{opacity:0;transform:translateY(15px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes backdrop-in{from{opacity:0}to{opacity:1}}
dialog.closing{pointer-events:none}dialog.closing::backdrop{animation:backdrop-out .15s ease-in both}
@keyframes backdrop-out{to{opacity:0}}
.dialog-heading{padding:21px 25px}.dialog-heading h2{font-size:17px}.dialog-footer{background:#fafcf9;border-radius:0 0 16px 16px}
.plan-details{background:#f6f9f4;padding:17px;border-radius:10px;line-height:1.8;font-size:12px}
.steps{line-height:1.8}.notice{animation:card-in .25s ease-out;font-size:12px}.log-dialog pre{background:#172e26;color:#d0e5d8;font-size:12px}
.login-page{background:radial-gradient(ellipse at 20% 15%,#dce9dc90,transparent 50%),radial-gradient(ellipse at 90% 85%,#e6ece050,transparent 45%),#f5f7f1}
.login-page:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(#9daf9c09 1px,transparent 1px),linear-gradient(90deg,#9daf9c09 1px,transparent 1px);background-size:54px 54px;mask-image:radial-gradient(ellipse,#000,transparent 80%)}
.login-card{position:relative;max-width:440px;padding:42px;border-radius:20px;border-color:#e0e9dc;background:#ffffffed;box-shadow:0 20px 75px #284a3210;animation:dialog-in .55s ease-out}
.login-symbol{display:grid;place-items:center;width:48px;height:48px;font-size:29px;color:white;background:var(--green);border-radius:14px;margin-bottom:30px;box-shadow:0 5px 15px #25745c20}
.login-card h1{font-size:23px;margin-top:9px}.login-card p{font-size:12px;margin-bottom:24px;color:#8a998b}.login-card small{font-size:10px;color:#97a397}.login-card label{font-size:12px;color:#6b806e}
.login-card input{padding:12px;border-color:#dbe4da;border-radius:9px}.login-card button{padding:12px;margin-top:18px;border-radius:9px}.login-card code{color:#728774}
.loading-line{height:3px;background:#edf2e9;border-radius:4px;margin-top:18px;overflow:hidden}.loading-line:after{content:"";display:block;height:100%;width:40%;background:#79ac90;animation:loading-line 1.4s ease-in-out infinite}
@keyframes loading-line{from{transform:translateX(-100%)}to{transform:translateX(350%)}}
@media(min-width:1400px){.projects{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1100px){.layout{grid-template-columns:200px 1fr}main{padding:28px}.projects{grid-template-columns:1fr}.metrics>div{padding:18px 15px}.metrics strong{font-size:19px}}
@media(max-width:650px){header{height:68px;padding:0 20px}.layout{display:block}.header-right{gap:7px}.avatar{display:none}aside{padding:12px}nav button{min-height:60px;margin-bottom:0;padding:9px 13px}.heading{margin-bottom:22px}main{padding:22px 18px}.metrics strong{font-size:19px}.metrics>div{padding:16px}.project{padding:21px}.login-card{padding:32px}.tabs{gap:22px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}.click-ripple{display:none}}