/* ================================================================
   RoshiDevOps — Neumorphism + Liquid 3D Jelly + Admin Panel
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=DM+Sans:wght@400;500;700&family=JetBrains+Mono:wght@400;500;700&display=swap');
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:#E0E5EC;color:#3D4852;font-family:'DM Sans',sans-serif;margin:0;min-height:100dvh}
.font-display{font-family:'Plus Jakarta Sans',sans-serif}
.font-mono{font-family:'JetBrains Mono',monospace}

/* ── Neumorphic ── */
.neu-raised{background:#E0E5EC;box-shadow:9px 9px 16px rgb(163 177 198/.6),-9px -9px 16px rgb(255 255 255/.5)}
.neu-raised-sm{background:#E0E5EC;box-shadow:5px 5px 10px rgb(163 177 198/.6),-5px -5px 10px rgb(255 255 255/.5)}
.neu-inset{background:#E0E5EC;box-shadow:inset 6px 6px 10px rgb(163 177 198/.6),inset -6px -6px 10px rgb(255 255 255/.5)}
.neu-inset-deep{background:#E0E5EC;box-shadow:inset 10px 10px 20px rgb(163 177 198/.7),inset -10px -10px 20px rgb(255 255 255/.6)}
.neu-inset-sm{background:#E0E5EC;box-shadow:inset 3px 3px 6px rgb(163 177 198/.6),inset -3px -3px 6px rgb(255 255 255/.5)}
.neu-btn{background:#E0E5EC;box-shadow:5px 5px 10px rgb(163 177 198/.6),-5px -5px 10px rgb(255 255 255/.5);transition:all .3s ease-out;cursor:pointer;border:none;outline:none}
.neu-btn:hover{transform:translateY(-1px);box-shadow:9px 9px 16px rgb(163 177 198/.7),-9px -9px 16px rgb(255 255 255/.6)}
.neu-btn:active{transform:translateY(.5px);box-shadow:inset 3px 3px 6px rgb(163 177 198/.6),inset -3px -3px 6px rgb(255 255 255/.5)}
.neu-btn-primary{background:#6C63FF;color:#fff;box-shadow:5px 5px 10px rgb(163 177 198/.6),-5px -5px 10px rgb(255 255 255/.5);transition:all .3s ease-out;cursor:pointer;border:none}
.neu-btn-primary:hover{background:#8B84FF;transform:translateY(-1px)}
.neu-btn-primary:active{transform:translateY(.5px);box-shadow:inset 4px 4px 8px rgba(75 65 180/.5),inset -4px -4px 8px rgba(140 130 255/.3)}
.neu-btn-danger{background:#E53E3E;color:#fff;box-shadow:5px 5px 10px rgb(163 177 198/.6),-5px -5px 10px rgb(255 255 255/.5);transition:all .3s ease-out;cursor:pointer;border:none}
.neu-btn-danger:hover{background:#C53030;transform:translateY(-1px)}
.neu-btn-success{background:#38B2AC;color:#fff;box-shadow:5px 5px 10px rgb(163 177 198/.6),-5px -5px 10px rgb(255 255 255/.5);transition:all .3s ease-out;cursor:pointer;border:none}
.neu-btn-success:hover{background:#2C9F99;transform:translateY(-1px)}
.neu-card{background:#E0E5EC;box-shadow:9px 9px 16px rgb(163 177 198/.6),-9px -9px 16px rgb(255 255 255/.5);transition:all .3s ease-out}
.neu-card:hover{transform:translateY(-2px);box-shadow:12px 12px 20px rgb(163 177 198/.7),-12px -12px 20px rgb(255 255 255/.6)}
.neu-input{background:#E0E5EC;box-shadow:inset 6px 6px 10px rgb(163 177 198/.6),inset -6px -6px 10px rgb(255 255 255/.5);border:none;outline:none;transition:box-shadow .3s;color:#3D4852}
.neu-input::placeholder{color:#A0AEC0}
.neu-input:focus{box-shadow:inset 10px 10px 20px rgb(163 177 198/.7),inset -10px -10px 20px rgb(255 255 255/.6),0 0 0 3px #E0E5EC,0 0 0 5px #6C63FF}

/* ================================================================
   LIQUID 3D JELLY BUTTONS — Enhanced Realism
   ================================================================ */
.jelly-wrap{
  display:flex;flex-direction:column;align-items:center;gap:16px;
  cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;
  perspective:600px;
}

/* The outer gel shell */
.jelly-body{
  position:relative;width:230px;height:160px;
  border-radius:48% 52% 55% 45%/42% 38% 62% 58%;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1),filter .5s ease,box-shadow .4s ease;
  filter:grayscale(1) brightness(.86);
  overflow:hidden;
  transform-style:preserve-3d;
  animation:jelly-morph 8s ease-in-out infinite;
}
.jelly-wrap:hover .jelly-body{
  filter:grayscale(0) brightness(1);
  animation:jelly-morph 4s ease-in-out infinite;
}
.jelly-wrap:active .jelly-body{
  transform:scaleX(1.14) scaleY(.86) rotateX(5deg);
  animation:none;
}
.jelly-wrap.glow .jelly-body{
  filter:grayscale(0) brightness(1.1);
}

/* ── CYAN (Free) ── */
.jelly-cyan{
  background:
    radial-gradient(ellipse 120% 80% at 30% 20%,rgba(103,232,249,.7),transparent 55%),
    radial-gradient(ellipse 100% 100% at 70% 80%,rgba(8,145,178,.9),transparent 60%),
    linear-gradient(160deg,#67e8f9 0%,#22d3ee 25%,#06b6d4 50%,#0891b2 70%,#065f6a 100%);
  box-shadow:
    0 20px 60px rgba(6,182,212,.3),
    0 8px 25px rgba(0,0,0,.1),
    inset 0 -15px 35px rgba(0,0,0,.2),
    inset 0 15px 30px rgba(255,255,255,.15),
    inset -10px 0 25px rgba(0,0,0,.08),
    inset 10px 0 25px rgba(103,232,249,.15);
}
.jelly-wrap:hover .jelly-cyan{
  box-shadow:
    0 25px 70px rgba(6,182,212,.45),
    0 10px 30px rgba(0,0,0,.12),
    inset 0 -15px 35px rgba(0,0,0,.2),
    inset 0 15px 30px rgba(255,255,255,.2),
    inset -10px 0 25px rgba(0,0,0,.08),
    inset 10px 0 25px rgba(103,232,249,.2);
}
.jelly-wrap.glow .jelly-cyan{
  box-shadow:
    0 0 60px rgba(34,211,238,.55),
    0 0 120px rgba(34,211,238,.2),
    0 25px 70px rgba(6,182,212,.5),
    inset 0 -15px 35px rgba(0,0,0,.15),
    inset 0 15px 30px rgba(255,255,255,.25);
}

/* ── PURPLE (Pro) ── */
.jelly-purple{
  background:
    radial-gradient(ellipse 120% 80% at 30% 20%,rgba(196,181,253,.7),transparent 55%),
    radial-gradient(ellipse 100% 100% at 70% 80%,rgba(124,58,237,.9),transparent 60%),
    linear-gradient(160deg,#c4b5fd 0%,#a78bfa 25%,#8b5cf6 50%,#7c3aed 70%,#4c1d95 100%);
  box-shadow:
    0 20px 60px rgba(139,92,246,.3),
    0 8px 25px rgba(0,0,0,.1),
    inset 0 -15px 35px rgba(0,0,0,.2),
    inset 0 15px 30px rgba(255,255,255,.15),
    inset -10px 0 25px rgba(0,0,0,.08),
    inset 10px 0 25px rgba(196,181,253,.15);
}
.jelly-wrap:hover .jelly-purple{
  box-shadow:
    0 25px 70px rgba(139,92,246,.45),
    0 10px 30px rgba(0,0,0,.12),
    inset 0 -15px 35px rgba(0,0,0,.2),
    inset 0 15px 30px rgba(255,255,255,.2),
    inset -10px 0 25px rgba(0,0,0,.08),
    inset 10px 0 25px rgba(196,181,253,.2);
}
.jelly-wrap.glow .jelly-purple{
  box-shadow:
    0 0 60px rgba(139,92,246,.55),
    0 0 120px rgba(139,92,246,.2),
    0 25px 70px rgba(139,92,246,.5),
    inset 0 -15px 35px rgba(0,0,0,.15),
    inset 0 15px 30px rgba(255,255,255,.25);
}

/* ── Morphing blob shape ── */
@keyframes jelly-morph{
  0%  {border-radius:48% 52% 55% 45%/42% 38% 62% 58%}
  15% {border-radius:52% 48% 50% 50%/45% 42% 58% 55%}
  30% {border-radius:45% 55% 52% 48%/40% 45% 55% 60%}
  50% {border-radius:50% 50% 48% 52%/44% 36% 64% 56%}
  65% {border-radius:55% 45% 50% 50%/38% 48% 52% 62%}
  80% {border-radius:46% 54% 54% 46%/46% 40% 60% 54%}
  100%{border-radius:48% 52% 55% 45%/42% 38% 62% 58%}
}

/* ── Top gloss / light refraction ── */
.jelly-body::before{
  content:'';position:absolute;z-index:3;
  top:6%;left:12%;width:76%;height:38%;
  background:linear-gradient(180deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.15) 40%,transparent 100%);
  border-radius:50% 50% 40% 60%/65% 65% 35% 35%;
  pointer-events:none;
  animation:gloss-drift 8s ease-in-out infinite alternate;
}
@keyframes gloss-drift{
  0%  {transform:translateX(0) translateY(0) scaleX(1)}
  50% {transform:translateX(4px) translateY(2px) scaleX(.96)}
  100%{transform:translateX(-3px) translateY(-1px) scaleX(1.02)}
}

/* ── Liquid surface (internal caustic wave) ── */
.jelly-body::after{
  content:'';position:absolute;z-index:2;inset:0;
  border-radius:inherit;
  background:
    radial-gradient(ellipse 35% 25% at 25% 65%, rgba(255,255,255,.12) 0%, transparent 100%),
    radial-gradient(ellipse 30% 20% at 70% 55%, rgba(255,255,255,.1) 0%, transparent 100%),
    radial-gradient(ellipse 20% 15% at 55% 35%, rgba(255,255,255,.08) 0%, transparent 100%);
  pointer-events:none;
  animation:caustic-move 6s ease-in-out infinite alternate;
}
@keyframes caustic-move{
  0%  {opacity:.6;transform:translate(0,0) scale(1)}
  33% {opacity:.9;transform:translate(3px,-2px) scale(1.02)}
  66% {opacity:.7;transform:translate(-2px,3px) scale(.98)}
  100%{opacity:.85;transform:translate(1px,-1px) scale(1.01)}
}

/* ── Floating bubble specks inside the liquid ── */
.jelly-bubble{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.7),rgba(255,255,255,.15) 60%,transparent 100%);
  pointer-events:none;z-index:4;
}
.jelly-bubble.b1{width:12px;height:12px;top:55%;left:25%;animation:bubble-float 5s ease-in-out infinite}
.jelly-bubble.b2{width:8px;height:8px;top:40%;left:60%;animation:bubble-float 4s ease-in-out 1s infinite}
.jelly-bubble.b3{width:6px;height:6px;top:65%;left:68%;animation:bubble-float 6s ease-in-out 2s infinite}
.jelly-bubble.b4{width:10px;height:10px;top:30%;left:38%;animation:bubble-float 5.5s ease-in-out .5s infinite}
.jelly-bubble.b5{width:5px;height:5px;top:50%;left:50%;animation:bubble-float 4.5s ease-in-out 1.5s infinite}
@keyframes bubble-float{
  0%,100%{transform:translateY(0) translateX(0) scale(1);opacity:.7}
  25%{transform:translateY(-6px) translateX(3px) scale(1.1);opacity:.9}
  50%{transform:translateY(-3px) translateX(-4px) scale(.9);opacity:.6}
  75%{transform:translateY(-8px) translateX(2px) scale(1.05);opacity:.8}
}

/* ── The pill (text floating on the liquid) ── */
.jelly-pill{
  position:absolute;top:50%;left:50%;z-index:5;
  transform:translate(-50%,-50%);
  width:60%;height:36%;
  background:linear-gradient(180deg,rgba(255,255,255,.94) 0%,rgba(245,245,252,.88) 100%);
  border-radius:28px;
  box-shadow:
    0 6px 18px rgba(0,0,0,.12),
    0 2px 4px rgba(0,0,0,.06),
    inset 0 2px 4px rgba(255,255,255,.9),
    inset 0 -2px 6px rgba(0,0,0,.04);
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:700;font-size:12px;letter-spacing:-.01em;
  color:#3D4852;text-shadow:0 1px 0 rgba(255,255,255,.5);
  animation:pill-bob 4s ease-in-out infinite;
}
@keyframes pill-bob{
  0%,100%{transform:translate(-50%,-50%) rotate(0deg)}
  25%{transform:translate(-50%,-52%) rotate(-.5deg)}
  50%{transform:translate(-50%,-48%) rotate(.3deg)}
  75%{transform:translate(-50%,-51%) rotate(-.2deg)}
}

/* ── Bottom edge reflection ── */
.jelly-edge-light{
  position:absolute;bottom:8%;right:10%;width:28%;height:15%;z-index:3;
  background:radial-gradient(ellipse,rgba(255,255,255,.12),transparent 70%);
  border-radius:50%;pointer-events:none;
  animation:edge-shimmer 5s ease-in-out infinite alternate;
}
@keyframes edge-shimmer{
  0%{opacity:.4;transform:translateX(0)}
  100%{opacity:.8;transform:translateX(-5px)}
}

.jelly-label{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:.95rem;white-space:nowrap;pointer-events:none}

/* ── Dialog ── */
.dialog-overlay{position:fixed;inset:0;background:rgba(0,0,0,.25);backdrop-filter:blur(4px);z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s}
.dialog-overlay.open{opacity:1;pointer-events:auto}
.dialog-box{max-width:400px;width:90%;transform:translateY(20px) scale(.96);transition:transform .3s}
.dialog-overlay.open .dialog-box{transform:translateY(0) scale(1)}

.locked-feature{position:relative;cursor:not-allowed;opacity:.75}
.locked-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(224,229,236,.6);backdrop-filter:blur(2px);border-radius:inherit;opacity:0;transition:opacity .3s}
.locked-feature:hover .locked-overlay{opacity:1}

/* ── Admin Terminal ── */
.admin-terminal{background:#1a1b26;color:#c0caf5;font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.7}
.admin-terminal .prompt{color:#7aa2f7}
.admin-terminal .cmd{color:#c0caf5}
.admin-terminal .out{color:#9aa5ce}
.admin-terminal .err{color:#f7768e}
.admin-terminal .ok{color:#9ece6a}
.term-input{background:transparent;border:none;outline:none;color:#c0caf5;font-family:inherit;font-size:inherit;width:calc(100% - 140px);caret-color:#7aa2f7}

.badge-ok{background:rgba(56 178 172/.15);color:#2C9F99}
.badge-err{background:rgba(229 62 62/.15);color:#C53030}

@keyframes spin-slow{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.animate-spin-slow{animation:spin-slow 8s linear infinite}
@keyframes pulse-soft{0%,100%{opacity:1}50%{opacity:.6}}
.animate-pulse-soft{animation:pulse-soft 2s cubic-bezier(.4,0,.6,1) infinite}

.log-info{color:#6B7280}.log-success{color:#38B2AC}.log-warning{color:#D69E2E}.log-error{color:#E53E3E}.log-system{color:#6C63FF}

::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#B0B8C4;border-radius:3px}
.admin-terminal::-webkit-scrollbar-thumb{background:#3b3d52}

.text-muted{color:#6B7280}.text-accent{color:#6C63FF}.text-teal{color:#38B2AC}
.format-selected{box-shadow:inset 6px 6px 10px rgb(163 177 198/.6),inset -6px -6px 10px rgb(255 255 255/.5)}
.format-selected .format-check{display:flex !important}
.ssh-key-item{transition:all .3s}
.ssh-key-item:hover{transform:translateX(4px)}
.opt-star{color:#D69E2E;font-size:10px;vertical-align:super}
.req-star{color:#E53E3E;font-size:10px;vertical-align:super}