/* WEB PANEL PROXY public CSS */
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;
  padding:24px;color:#e6edf3;
  font-family:"JetBrains Mono","Fira Code",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:
    radial-gradient(ellipse at 15% 20%,#00d4ff10,transparent 55%),
    radial-gradient(ellipse at 85% 80%,#7c3aed10,transparent 55%),
    radial-gradient(ellipse at 50% 50%,#0ea5e910,transparent 70%),
    #0a0e1a;
}
.grid-bg{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(#ffffff06 1px,transparent 1px),
    linear-gradient(90deg,#ffffff06 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse at center,black 30%,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse at center,black 30%,transparent 80%);
}
.scanline{
  position:fixed;left:0;right:0;height:2px;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,transparent,#00d4ff55,#00d4ff,transparent);
  box-shadow:0 0 20px #00d4ff88;
  animation:scan 6s linear infinite;
}
@keyframes scan{0%{top:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:100%;opacity:0}}
.particles{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.p{position:absolute;color:#00d4ff22;font-size:.9rem;font-weight:700;animation:drift linear infinite}
@keyframes drift{0%{transform:translateY(0) rotate(0deg);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(-120vh) rotate(360deg);opacity:0}}

.box{
  position:relative;z-index:2;width:min(720px,100%);
  padding:48px 44px;text-align:left;
  border:1px solid #ffffff12;border-radius:24px;
  background:linear-gradient(180deg,#ffffff08,#ffffff03);
  box-shadow:0 40px 80px #000a,inset 0 1px 0 #ffffff0a;
  backdrop-filter:blur(16px);
}
.term-head{
  display:flex;align-items:center;gap:10px;
  margin:-48px -44px 36px;padding:16px 20px;
  border-bottom:1px solid #ffffff10;
  background:#ffffff05;border-radius:24px 24px 0 0;
}
.dot{width:12px;height:12px;border-radius:50%}
.dot.r{background:#ff5f56}
.dot.y{background:#ffbd2e}
.dot.g{background:#27c93f}
.term-title{margin-left:12px;color:#7d8590;font-size:12px;letter-spacing:.5px}
.term-title b{color:#00d4ff;font-weight:700}

.logo{display:flex;align-items:center;gap:16px;margin-bottom:28px}
.logo-icon{
  width:56px;height:56px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border:1px solid #00d4ff33;border-radius:14px;
  background:linear-gradient(135deg,#00d4ff0f,#7c3aed0f);
  font-size:26px;font-weight:800;color:#00d4ff;
  position:relative;
  animation:pulseGlow 3s ease-in-out infinite;
}
.logo-icon::before{
  content:"";
  position:absolute;inset:6px;
  border:1px solid #7c3aed33;border-radius:8px;
  animation:pulseGlow 3s ease-in-out infinite reverse;
}
@keyframes pulseGlow{
  0%,100%{box-shadow:0 0 0 0 #00d4ff22;border-color:#00d4ff33}
  50%{box-shadow:0 0 30px 4px #00d4ff22;border-color:#00d4ff66}
}
.logo-text h1{
  margin:0 0 4px;font-size:clamp(20px,4vw,26px);font-weight:800;
  letter-spacing:-.02em;color:#e6edf3;
}
.logo-text h1 span{
  background:linear-gradient(90deg,#00d4ff,#7c3aed);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.logo-text p{margin:0;color:#7d8590;font-size:13px;letter-spacing:.3px}

.status{
  display:flex;align-items:center;gap:12px;
  padding:16px 20px;margin-bottom:28px;
  border:1px solid #ffffff10;border-radius:14px;
  background:#00000040;font-size:14px;
}
.status-indicator{
  width:10px;height:10px;border-radius:50%;flex-shrink:0;
  background:#00d4ff;box-shadow:0 0 12px #00d4ff;
  animation:blink 1.2s ease-in-out infinite;
}
@keyframes blink{50%{opacity:.25}}
.status-text{color:#c9d1d9;flex:1}
.status-text b{color:#00d4ff}
.cursor{
  display:inline-block;width:8px;height:15px;margin-left:2px;
  background:#00d4ff;vertical-align:-2px;
  animation:blink .8s step-end infinite;
}

.progress-wrap{margin-bottom:28px}
.progress-header{
  display:flex;justify-content:space-between;
  margin-bottom:10px;font-size:12px;color:#7d8590;letter-spacing:.5px;
}
.progress-header b{color:#00d4ff}
.track{
  height:6px;overflow:hidden;border-radius:6px;
  background:#ffffff0a;border:1px solid #ffffff08;
}
.bar{
  width:0;height:100%;border-radius:inherit;
  background:linear-gradient(90deg,#00d4ff,#7c3aed,#00d4ff);
  background-size:200% 100%;
  box-shadow:0 0 16px #00d4ff66;
  animation:barFlow 2s linear infinite;
  transition:width .15s linear;
}
@keyframes barFlow{to{background-position:200% 0}}

.log{
  padding:16px 20px;margin-bottom:28px;
  border:1px solid #ffffff10;border-radius:14px;
  background:#00000060;font-size:13px;line-height:1.9;
  max-height:140px;overflow:hidden;position:relative;
}
.log-line{display:flex;gap:10px;opacity:.85}
.log-line .ts{color:#484f58;flex-shrink:0}
.log-line .ok{color:#27c93f}
.log-line .info{color:#00d4ff}
.log-line .warn{color:#ffbd2e}

.meta{
  display:flex;flex-wrap:wrap;gap:20px;
  padding-top:24px;border-top:1px solid #ffffff0a;
  color:#484f58;font-size:12px;
}
.meta-item{display:flex;align-items:center;gap:8px}
.meta-item .k{color:#7d8590}
.meta-item .v{color:#00d4ff;font-weight:700}

@media(max-width:600px){
  .box{padding:32px 24px;border-radius:20px}
  .term-head{margin:-32px -24px 28px;padding:14px 16px;border-radius:20px 20px 0 0}
  .logo-icon{width:48px;height:48px;font-size:22px}
  .log{font-size:12px;max-height:120px}
  .meta{gap:14px}
}