/* MCNet Panel Demo — Custom Styles (geteilt über alle Seiten) */

html { color-scheme: dark; }
body { background:#0a0e13; background-image:linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px); background-size:32px 32px; }
::selection { background:rgba(74,222,128,.3); }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#233042; border-radius:8px; border:2px solid #0a0e13; }
::-webkit-scrollbar-thumb:hover { background:#2e3f57; }

/* ── Karten & Buttons ─────────────────────────────────────────── */
.card { background:linear-gradient(180deg,#121a24,#10161e); border:1px solid #1f2a37; border-radius:14px; }
.card-hover { transition:transform .15s ease, border-color .15s ease; }
.card-hover:hover { transform:translateY(-2px); border-color:#2b3d4f; }

.btn-mc { font-weight:700; border-radius:10px; background:linear-gradient(180deg,#34d399,#22c55e); border-bottom:4px solid #15803d; color:#04250f; transition:transform .06s ease, filter .15s ease; cursor:pointer; }
.btn-mc:hover { filter:brightness(1.07); }
.btn-mc:active { transform:translateY(2px); border-bottom-width:2px; }
.btn-mc:disabled { filter:grayscale(.7) brightness(.7); cursor:not-allowed; }

.btn-sec { font-weight:600; border-radius:10px; background:#1a2331; border:1px solid #26334a; border-bottom:3px solid #131a26; color:#cbd5e1; transition:transform .06s ease, background .15s ease; cursor:pointer; }
.btn-sec:hover { background:#212d3f; }
.btn-sec:active { transform:translateY(1px); border-bottom-width:2px; }
.btn-sec:disabled { opacity:.5; cursor:not-allowed; }

.btn-danger { font-weight:600; border-radius:10px; background:rgba(248,113,113,.12); border:1px solid rgba(248,113,113,.35); border-bottom:3px solid rgba(248,113,113,.2); color:#fca5a5; cursor:pointer; }
.btn-danger:hover { background:rgba(248,113,113,.2); }
.btn-danger:active { transform:translateY(1px); border-bottom-width:2px; }

/* ── Chips / Badges ───────────────────────────────────────────── */
.chip { display:inline-flex; align-items:center; gap:4px; font-size:11px; padding:3px 9px; border-radius:9999px; background:rgba(148,163,184,.08); border:1px solid rgba(148,163,184,.16); color:#9fb0c3; white-space:nowrap; }
.chip-grass { background:rgba(74,222,128,.1); border-color:rgba(74,222,128,.3); color:#4ade80; }
.chip-gold { background:rgba(251,191,36,.1); border-color:rgba(251,191,36,.3); color:#fbbf24; }
.chip-red { background:rgba(248,113,113,.1); border-color:rgba(248,113,113,.3); color:#f87171; }
.chip-diamond { background:rgba(56,189,248,.1); border-color:rgba(56,189,248,.3); color:#38bdf8; }
.chip-btn { cursor:pointer; transition:all .15s ease; }
.chip-btn:hover { background:rgba(74,222,128,.12); border-color:rgba(74,222,128,.4); color:#4ade80; }

/* ── XP-Balken ────────────────────────────────────────────────── */
.xp-bar { position:relative; height:10px; border-radius:9999px; background:#182230; overflow:hidden; border:1px solid #223046; }
.xp-fill { position:relative; height:100%; border-radius:9999px; background:linear-gradient(90deg,#22c55e,#4ade80); box-shadow:0 0 10px rgba(74,222,128,.35); transition:width .6s cubic-bezier(.2,.8,.3,1); }
.xp-fill::after { content:''; position:absolute; inset:0; background:repeating-linear-gradient(90deg,transparent 0 11px,rgba(0,0,0,.22) 11px 13px); }
.xp-fill.gold { background:linear-gradient(90deg,#d97706,#fbbf24); box-shadow:0 0 10px rgba(251,191,36,.3); }
.xp-fill.red { background:linear-gradient(90deg,#dc2626,#f87171); box-shadow:0 0 10px rgba(248,113,113,.3); }
.xp-fill.blue { background:linear-gradient(90deg,#0284c7,#38bdf8); box-shadow:0 0 10px rgba(56,189,248,.3); }

/* ── Status-Punkte ────────────────────────────────────────────── */
.dot { width:8px; height:8px; border-radius:9999px; flex-shrink:0; display:inline-block; }
.dot-run { background:#4ade80; box-shadow:0 0 8px rgba(74,222,128,.9); animation:dotPulse 2s infinite; }
.dot-stop { background:#64748b; }
.dot-wait { background:#fbbf24; box-shadow:0 0 8px rgba(251,191,36,.8); animation:dotPulse 1.2s infinite; }
.dot-crash { background:#f87171; box-shadow:0 0 8px rgba(248,113,113,.9); }
@keyframes dotPulse { 0%,100%{opacity:1} 50%{opacity:.45} }

/* ── Navigation ───────────────────────────────────────────────── */
.nav-item { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:10px; color:#94a3b8; font-weight:500; transition:all .15s ease; position:relative; text-decoration:none; }
.nav-item:hover { background:rgba(148,163,184,.06); color:#e2e8f0; }
.nav-item.active { background:rgba(74,222,128,.08); color:#4ade80; box-shadow:inset 3px 0 0 #4ade80; }

/* ── Toggle-Schalter ──────────────────────────────────────────── */
.tgl { width:44px; height:24px; border-radius:9999px; background:#223041; position:relative; transition:.2s; border:1px solid #2b3a4d; flex-shrink:0; cursor:pointer; }
.tgl .knob { position:absolute; top:2px; left:2px; width:18px; height:18px; background:#8b98a5; border-radius:9999px; transition:.2s; }
.tgl.on { background:rgba(74,222,128,.25); border-color:rgba(74,222,128,.5); }
.tgl.on .knob { left:22px; background:#4ade80; }
.tgl-sm { width:36px; height:20px; }
.tgl-sm .knob { width:14px; height:14px; }
.tgl-sm.on .knob { left:18px; }

/* ── Inputs ───────────────────────────────────────────────────── */
.input { background:#0d131b; border:1px solid #223043; border-radius:10px; padding:9px 13px; color:#e6edf3; outline:none; font-size:14px; width:100%; transition:border-color .15s, box-shadow .15s; }
.input:focus { border-color:rgba(74,222,128,.5); box-shadow:0 0 0 3px rgba(74,222,128,.12); }
.input::placeholder { color:#475569; }

/* ── Konsole / Terminal ───────────────────────────────────────── */
.term { background:#05070b; border:1px solid #1b2635; border-radius:12px; overflow:hidden; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:12.5px; }
.term-body div { white-space:pre-wrap; word-break:break-all; line-height:1.55; }
.lt-info { color:#9fb3c8; }
.lt-warn { color:#fbbf24; }
.lt-err { color:#f87171; }
.lt-join { color:#fde047; }
.lt-cmd { color:#4ade80; font-weight:600; }

/* ── Modals ───────────────────────────────────────────────────── */
.modal-overlay { position:fixed; inset:0; background:rgba(4,8,12,.72); backdrop-filter:blur(5px); z-index:60; display:flex; align-items:center; justify-content:center; padding:16px; animation:fadeIn .18s ease; }
.modal { background:#0f151d; border:1px solid #24324a; border-radius:16px; max-width:640px; width:100%; max-height:90vh; overflow:auto; animation:popIn .22s cubic-bezier(.2,.9,.3,1.15); }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes popIn { from{opacity:0; transform:scale(.94) translateY(8px)} to{opacity:1; transform:scale(1) translateY(0)} }

/* ── Toasts ───────────────────────────────────────────────────── */
.toast { background:#121a24; border:1px solid #24324a; border-left:3px solid #4ade80; border-radius:12px; padding:11px 14px; font-size:13.5px; color:#dbe4ee; box-shadow:0 10px 30px rgba(0,0,0,.5); animation:toastIn .25s cubic-bezier(.2,.9,.3,1.1); display:flex; align-items:center; gap:10px; }
.toast.out { animation:toastOut .3s ease forwards; }
@keyframes toastIn { from{opacity:0; transform:translateX(30px)} to{opacity:1; transform:translateX(0)} }
@keyframes toastOut { to{opacity:0; transform:translateX(30px)} }

/* ── Logo & Gras-Streifen ─────────────────────────────────────── */
.logo-block { width:36px; height:36px; border-radius:7px; border:2px solid #0b1a10; position:relative; background:
  repeating-linear-gradient(90deg,rgba(255,255,255,.1) 0 4px,transparent 4px 9px),
  repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 4px,transparent 4px 9px),
  linear-gradient(180deg,#5ee27a 0 34%,#8a5a2b 34% 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 3px 8px rgba(0,0,0,.4); }
.logo-block::after { content:''; position:absolute; left:0; right:0; top:28%; height:12%; background:linear-gradient(90deg,#3fbf5e 0 20%,#7bd68f 20% 45%,#4cc36c 45% 70%,#8adf9a 70% 100%); }

.grass-strip { height:10px; background:linear-gradient(180deg,#4ade80 0 50%,#7c4a1e 50% 100%); position:relative; overflow:hidden; }
.grass-strip::after { content:''; position:absolute; inset:0; background:
  repeating-linear-gradient(90deg,rgba(0,0,0,.22) 0 6px,transparent 6px 13px),
  repeating-linear-gradient(90deg,rgba(255,255,255,.07) 3px 7px,transparent 7px 19px); }

/* ── Splash-Text (Minecraft-Hommage) ──────────────────────────── */
.splash { position:absolute; right:14px; top:6px; font-family:'Press Start 2P',monospace; font-size:7px; color:#fde047; text-shadow:2px 2px 0 rgba(0,0,0,.6); transform:rotate(-7deg); animation:splashPulse 1.3s ease-in-out infinite; max-width:110px; text-align:center; line-height:1.7; }
@keyframes splashPulse { 0%,100%{transform:rotate(-7deg) scale(1)} 50%{transform:rotate(-7deg) scale(1.09)} }

/* ── Partikel ─────────────────────────────────────────────────── */
.particle { position:fixed; z-index:80; pointer-events:none; border-radius:2px; animation:burst .9s cubic-bezier(.15,.7,.35,1) forwards; }
@keyframes burst { from{transform:translate(0,0) rotate(0deg); opacity:1} to{transform:translate(var(--dx),var(--dy)) rotate(var(--rot)); opacity:0} }

/* ── Pixel-Karten-Ecken ───────────────────────────────────────── */
.pixel-card { clip-path:polygon(0 6px,6px 6px,6px 0,calc(100% - 6px) 0,calc(100% - 6px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 6px) calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 6px),0 calc(100% - 6px)); }

.shake { animation:shake .35s ease; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 50%{transform:translateX(5px)} 75%{transform:translateX(-3px)} }

/* ── Tabs ─────────────────────────────────────────────────────── */
.tab-btn { display:flex; align-items:center; gap:6px; padding:10px 14px; font-size:13.5px; font-weight:600; color:#8b98a5; border-bottom:2px solid transparent; white-space:nowrap; transition:all .15s ease; cursor:pointer; background:none; border-top:none; border-left:none; border-right:none; }
.tab-btn:hover { color:#e2e8f0; }
.tab-btn.active { color:#4ade80; border-bottom-color:#4ade80; }

/* ── Avatare ──────────────────────────────────────────────────── */
.ring-online { box-shadow:0 0 0 2px #0a0e13, 0 0 0 4px rgba(74,222,128,.7); }
.ring-off { box-shadow:0 0 0 2px #0a0e13, 0 0 0 4px #33415580; }

.blink { animation:blink 1.1s steps(2) infinite; }
@keyframes blink { to{opacity:0} }

/* ── DM-Chat ──────────────────────────────────────────────────── */
.dm-bubble-me { background:rgba(74,222,128,.13); border:1px solid rgba(74,222,128,.25); }
.dm-bubble-other { background:#151d27; border:1px solid #1f2a37; }