/* thebase24.com — Landing im webmail/searchwiki-Look (gleiche Tokens). */
:root{
  --bg:#0a0d0a; --bg-2:#0c110b; --panel:#111710; --panel-2:#151d13;
  --line:#1e281a; --line-2:#2b3a24;
  --ink:#e9f1e4; --mute:#8fa085; --dim:#5f705a;
  --acc:#a2dc02; --acc-2:#c2ff3a; --acc-glow:rgba(162,220,2,.16);
  --sans:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --display:'Space Grotesk',var(--sans);
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --radius:16px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.6;
  -webkit-font-smoothing:antialiased;min-height:100vh;display:grid;place-items:center;padding:28px;
  position:relative;overflow-x:hidden;
}
::selection{background:var(--acc);color:#081007}

/* Hintergrund: sanftes Raster + Glow */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(680px 380px at 50% -8%,var(--acc-glow),transparent 70%),
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:100% 100%,44px 44px,44px 44px;
  -webkit-mask-image:radial-gradient(760px 520px at 50% 34%,#000 55%,transparent 100%);
          mask-image:radial-gradient(760px 520px at 50% 34%,#000 55%,transparent 100%);
  opacity:.5;animation:drift 24s linear infinite;
}
@keyframes drift{from{background-position:0 0,0 0,0 0}to{background-position:0 0,0 44px,44px 0}}

.wrap{position:relative;z-index:1;width:100%;max-width:560px;text-align:center;
  animation:rise .6s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Status */
.status{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--acc-2);
  background:var(--acc-glow);border:1px solid rgba(162,220,2,.35);border-radius:999px;padding:7px 14px;margin-bottom:26px}
.status .dot{width:9px;height:9px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 0 var(--acc);
  animation:pulse 1.9s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(162,220,2,.55)}70%{box-shadow:0 0 0 10px rgba(162,220,2,0)}100%{box-shadow:0 0 0 0 rgba(162,220,2,0)}}

/* Marke */
.brand{font-family:var(--display);font-weight:700;font-size:clamp(38px,7vw,60px);letter-spacing:-.02em;line-height:1.04}
.brand .a{color:var(--acc)}
.brand .d{color:var(--dim);font-weight:600}
.tag{color:var(--mute);font-size:16px;margin-top:12px}
.tag b{color:var(--ink);font-weight:600}

.prompt{font-family:var(--mono);font-size:13px;color:var(--dim);margin-top:18px}
.prompt .g{color:var(--acc)}
.prompt .cursor{display:inline-block;width:8px;height:15px;background:var(--acc);margin-left:3px;
  vertical-align:-2px;animation:blink 1.1s step-end infinite}
@keyframes blink{50%{opacity:0}}

/* Server-Info */
.panel{margin-top:30px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:6px 8px;text-align:left;box-shadow:0 20px 60px -30px rgba(0,0,0,.8)}
.panel .row{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:11px 14px;border-bottom:1px solid var(--line);font-size:14px}
.panel .row:last-child{border-bottom:0}
.panel .k{font-family:var(--mono);font-size:12px;color:var(--dim);letter-spacing:.04em;text-transform:uppercase}
.panel .v{font-family:var(--mono);font-size:13px;color:var(--ink);text-align:right;word-break:break-all}
.panel .v .ok{color:var(--acc-2)}

.foot{margin-top:26px;font-family:var(--mono);font-size:11.5px;color:var(--dim);letter-spacing:.05em}
.foot a{color:var(--mute);text-decoration:none}
.foot a:hover{color:var(--acc)}

@media(max-width:520px){
  .panel .row{flex-direction:column;align-items:flex-start;gap:2px}
  .panel .v{text-align:left}
}