style.css

*{box-sizing:border-box}:root{--bg:#071120;--card:rgba(15,26,48,.88);--line:rgba(255,255,255,.1);--text:#f7fbff;--muted:#9fb0c7;--cyan:#56ccf2;--blue:#60a5fa;--green:#42e79b;--red:#ff5f7e;--yellow:#ffd166;--shadow:0 24px 70px rgba(0,0,0,.38)}@keyframes enter{from{opacity:0;transform:translateY(16px) scale(.985);filter:blur(4px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}@keyframes toastIn{from{opacity:0;transform:translateX(22px) scale(.96)}to{opacity:1;transform:translateX(0) scale(1)}}@keyframes toastOut{to{opacity:0;transform:translateX(22px) scale(.96)}}@keyframes timer{from{transform:scaleX(1)}to{transform:scaleX(0)}}body{margin:0;min-height:100vh;font-family:Arial,sans-serif;color:var(--text);background:radial-gradient(circle at 10% 0%,rgba(86,204,242,.12),transparent 30%),radial-gradient(circle at 100% 20%,rgba(255,95,126,.12),transparent 28%),linear-gradient(180deg,#06101d,#091427)}.bg{position:fixed;width:320px;height:320px;border-radius:999px;filter:blur(100px);opacity:.5;pointer-events:none;animation:floaty 8s ease-in-out infinite}.bg-a{left:-110px;top:40px;background:#1fb6ff}.bg-b{right:-120px;bottom:80px;background:#ff5f7e;animation-delay:-4s}.app{width:min(1120px,calc(100% - 24px));margin:0 auto;padding:24px 0 40px;position:relative;z-index:1}.hero,.card,.stat{background:linear-gradient(180deg,rgba(15,26,48,.92),rgba(9,18,35,.92));border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);animation:enter .45s ease both}.hero{padding:24px;margin-bottom:16px;display:grid;grid-template-columns:1.3fr .9fr;gap:16px;align-items:center}.badge{display:inline-block;margin:0 0 12px;padding:8px 12px;border-radius:999px;background:rgba(86,204,242,.12);border:1px solid rgba(86,204,242,.22);color:#d4f8ff;font-weight:700;font-size:13px}h1{margin:0 0 8px;font-size:clamp(34px,5vw,56px);line-height:.95}h2{margin:0 0 8px;font-size:24px}.muted{margin:0;color:var(--muted);line-height:1.6}.server-address{padding:18px;border-radius:20px;background:rgba(86,204,242,.09);border:1px solid rgba(86,204,242,.22)}.server-address span,.server-address small{display:block;color:var(--muted);font-weight:700}.server-address strong{display:block;margin:8px 0;font-size:clamp(20px,3vw,30px);word-break:break-all}.card{padding:20px;margin-bottom:16px}label{display:block;margin:14px 0 8px;color:#dbeafe;font-weight:700}input{width:100%;border:1px solid rgba(255,255,255,.11);outline:none;border-radius:16px;background:rgba(3,11,25,.82);color:white;padding:15px 16px;font-size:15px}input:focus{border-color:rgba(86,204,242,.55);box-shadow:0 0 0 4px rgba(86,204,242,.1)}.btn,.small{border:0;border-radius:16px;padding:14px 18px;cursor:pointer;font-weight:800;transition:.16s ease}.btn:hover,.small:hover{transform:translateY(-2px);filter:brightness(1.04)}.primary{width:100%;margin-top:14px;background:linear-gradient(135deg,#56ccf2,#1b9ed0);color:#04293b}.controls{display:flex;flex-wrap:wrap;gap:12px}.start{background:linear-gradient(135deg,#5eead4,#22c55e);color:#062a17}.stop{background:linear-gradient(135deg,#ff7a90,#ff4d6d);color:#3b0710}.restart{background:linear-gradient(135deg,#ffe08a,#ffbf47);color:#4b2e00}.list{background:linear-gradient(135deg,#93c5fd,#60a5fa);color:#0b2955}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px}.stat{padding:18px}.stat span{color:var(--muted);font-weight:700}.stat strong{display:block;font-size:29px;margin:8px 0 4px}.stat small{color:var(--muted)}.terminal-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:14px}.terminal-actions{display:flex;gap:10px}.small{background:rgba(255,255,255,.08);color:#eaf2ff}pre{margin:0;height:520px;overflow:auto;background:#020817;color:#56f39a;border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:16px;line-height:1.45;white-space:pre;font-family:Consolas,"Courier New",monospace;font-size:14px}.message{min-height:20px;color:var(--yellow);font-weight:700}.toast-wrap{position:fixed;right:18px;bottom:18px;display:grid;gap:10px;z-index:20}.toast{position:relative;overflow:hidden;min-width:280px;max-width:400px;border-radius:18px;padding:14px 16px 18px;background:#1e293b;box-shadow:var(--shadow);animation:toastIn .22s ease both}.toast.good{background:linear-gradient(135deg,#22c55e,#10b981);color:#062a17}.toast.bad{background:linear-gradient(135deg,#ff7a90,#ef4444);color:white}.toast.info{background:linear-gradient(135deg,#56ccf2,#60a5fa);color:#04293b}.toast::after{content:"";position:absolute;left:0;bottom:0;height:4px;width:100%;background:rgba(255,255,255,.7);transform-origin:left;animation:timer 3s linear forwards}.toast.leave{animation:toastOut .18s ease forwards}@media(max-width:850px){.hero,.stats{grid-template-columns:1fr}.controls{display:grid;grid-template-columns:1fr}.terminal-head{flex-direction:column}pre{height:430px}}