/* ===== /homelab : plain HTML + CSS (no frameworks, no JavaScript) ===== */
:root{
  color-scheme:light;
  --a400:139 92 246; --a500:124 58 237; --a950:91 33 182; --c300:196 181 253;   /* violet (default) */
  --font:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
body:has(#t-green:checked){--a400:16 185 129; --a500:5 150 105; --a950:6 78 59; --c300:110 231 183;} /* green theme (CSS only) */
html[data-theme="green"]{--a400:16 185 129; --a500:5 150 105; --a950:6 78 59; --c300:110 231 183;} /* green theme (set by optional script) */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0;min-height:100%}
body{
  background:#f1f5f9;color:#475569;font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
body::after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 80% 45% at 50% 0%,rgb(var(--a500) / .14),transparent 70%),
             radial-gradient(rgba(100,116,139,.16) 1px,transparent 1.5px) 0 0/26px 26px}

/* ---------- blurred RJ45 cable background ---------- */
.cables{position:fixed;inset:-6%;z-index:0;pointer-events:none;overflow:hidden}
.cables::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 35%,rgba(241,245,249,.05),rgba(241,245,249,.88) 85%),linear-gradient(rgba(248,250,252,.35),rgba(241,245,249,.6))}
.cab{position:absolute;inset:0;width:100%;height:100%}
.cab-back{filter:blur(10px);opacity:.55;animation:sway 14s ease-in-out infinite}
.cab-front{filter:blur(5px);opacity:.75;animation:sway 19s ease-in-out infinite reverse}
@keyframes sway{0%,100%{transform:translateX(-14px) scale(1.03)}50%{transform:translateX(14px) scale(1.03)}}
.cables-green{display:none}
body:has(#t-green:checked) .cables-violet{display:none}
body:has(#t-green:checked) .cables-green{display:block}
html[data-theme="green"] .cables-violet{display:none}
html[data-theme="green"] .cables-green{display:block}

/* ---------- theme switch (top left, CSS only) ---------- */
.switch{position:fixed;z-index:50;left:14px;top:calc(env(safe-area-inset-top,0px) + 14px);
  display:flex;align-items:center;gap:.5rem;padding:.375rem .625rem;border-radius:999px;
  border:1px solid #cbd5e1;background:rgba(255,255,255,.75);box-shadow:0 4px 14px -6px rgba(15,23,42,.25);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.switch-label{display:none;font:10px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:#64748b}
@media(min-width:640px){.switch-label{display:inline}}
.switch input{position:absolute;opacity:0;pointer-events:none}
.sw{width:20px;height:20px;border-radius:50%;cursor:pointer;outline:2px solid transparent;outline-offset:2px;transition:transform .2s,outline-color .2s}
.sw:hover{transform:scale(1.25)}
.sw-violet{background:#7c3aed}.sw-green{background:#059669}
#t-violet:checked + .sw,#t-green:checked + .sw{outline-color:#0f172a}
.switch input:focus-visible + .sw{outline-color:#0f172a}

/* ---------- layout ---------- */
main{position:relative;z-index:10;max-width:72rem;min-height:100vh;min-height:100dvh;margin:0 auto;padding:3rem 1.25rem;
  display:flex;flex-direction:column;align-items:center;justify-content:center}

/* ---------- title row ---------- */
.brand{display:flex;flex-direction:row-reverse;align-items:center;justify-content:center;gap:.75rem;animation:rise .8s ease-out backwards}
@media(min-width:640px){.brand{gap:1rem}}

h1{margin:0;font-size:clamp(2.25rem,6vw,3.75rem);line-height:1;font-weight:800;letter-spacing:-.025em;color:#0f172a}
.tw{position:relative;display:inline-block;white-space:nowrap}
.type-fx{display:inline-block}
.tw .type-fx{animation:typing 1.6s steps(8,end) .8s both}
@keyframes typing{from{clip-path:inset(-40px 100% -40px -40px)}to{clip-path:inset(-40px -40px -40px -40px)}}
.caret{position:absolute;top:10%;bottom:6%;left:0;width:.09em;opacity:0;background:rgb(var(--a500));
  box-shadow:0 0 14px rgb(var(--a500) / .9);
  animation:caretMove 1.6s steps(8,end) .8s both,caretBlink 1s steps(1) 2.4s infinite}
@keyframes caretMove{from{left:0;opacity:1}to{left:100%;opacity:1}}
@keyframes caretBlink{0%,100%{opacity:1}50%{opacity:0}}
.slash{display:inline-block;color:rgb(var(--a500));animation:slashPulse 2s ease-in-out infinite}
@keyframes slashPulse{0%,100%{text-shadow:0 0 0 rgb(var(--a500) / 0)}50%{text-shadow:0 0 20px rgb(var(--a500) / .55),0 0 5px rgb(var(--a500) / .35)}}
.shimmer{background:linear-gradient(100deg,#0f172a 42%,rgb(var(--a400)) 50%,#0f172a 58%);background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  animation:titleShine 4.5s ease-in-out infinite}
@keyframes titleShine{0%{background-position:130% 0}55%,100%{background-position:-130% 0}}

/* ---------- hero title ---------- */
.hero{margin-top:2.5rem;max-width:44rem;text-align:center;animation:rise .8s ease-out .3s backwards}
.hero h2{margin:0;font-size:clamp(1.6rem,4.2vw,3rem);line-height:1.1;font-weight:800;letter-spacing:-.025em;color:#0f172a}
.hero h2 span{color:rgb(var(--a500));text-shadow:0 0 26px rgb(var(--a500) / .22)}
.hero p{margin:.75rem 0 0;font-size:clamp(.95rem,1.6vw,1.125rem);line-height:1.5;color:#475569}

@keyframes rise{from{opacity:0;transform:translateY(22px)}}
a:focus-visible{outline:2px solid rgb(var(--a500));outline-offset:3px}

/* ---------- Wyśrodkowany kafelek statusu TS3 ---------- */
.server-status-card {
    margin-top: 2.5rem;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid #cbd5e1;
    padding: 1rem 1.5rem;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 14px -6px rgba(15, 23, 42, 0.15);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    animation: rise .8s ease-out .4s backwards;
}
.status-header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}
.status-title {
    font-weight: 700;
    color: #0f172a;
    font-size: 1rem;
}
.status-info {
    font: 0.8125rem/1.25rem var(--mono);
    color: #64748b;
}
.server-status-card .dot {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: #94a3b8;
    transition: background .3s, box-shadow .3s;
}
.server-status-card .dot.is-online {
    background: rgb(var(--a500));
    box-shadow: 0 0 10px rgb(var(--a500) / .6);
}
.server-status-card .dot.is-offline {
    background: #ef4444;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.6);
}