/* ==========================================================================
   LeafHost Panel — shared stylesheet for panel.html (client) + admin.html
   Design language: black background, white text, green used ONLY for
   outlines, the logo mark, and small status accents. No green fills of
   large surfaces, no green body text.
   ========================================================================== */

:root{
  --black:#000000;
  --bg:#050505;
  --surface:#0b0b0b;
  --surface-2:#111111;
  --surface-3:#161616;

  --line:#1d1d1d;
  --line-soft:#161616;

  --green:#39ff86;
  --green-dim:#1d6b3e;
  --green-line:#204a30;
  --green-glow:rgba(57,255,134,0.18);

  --white:#f4f4f4;
  --text:#e9e9e9;
  --text-dim:#8f8f8f;
  --text-dimmer:#5c5c5c;

  --amber:#e2b93b;
  --red:#ff5c5c;
  --red-line:#4a2323;

  --radius:10px;
  --radius-sm:6px;
  --font-display:'Space Grotesk', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-display);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;background:none;border:none;color:inherit;}
input{font-family:inherit;color:inherit;background:none;border:none;outline:none;}
.mono{font-family:var(--font-mono);}
::selection{background:var(--green);color:#000;}

/* subtle scrollbar */
::-webkit-scrollbar{width:9px;height:9px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:6px;}
::-webkit-scrollbar-thumb:hover{background:var(--green-line);}

/* ---------------------------------------------------------------------- */
/* Topbar                                                                  */
/* ---------------------------------------------------------------------- */
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:20px;
  height:60px;padding:0 22px;
  background:rgba(5,5,5,0.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar .brand{
  display:flex;align-items:center;gap:10px;
  font-weight:600;font-size:0.98rem;letter-spacing:-0.01em;
  flex-shrink:0;
}
.topbar .brand svg{display:block;}
.topbar .brand-badge{
  font-family:var(--font-mono);
  font-size:0.6rem;letter-spacing:0.12em;
  color:var(--green);
  border:1px solid var(--green-line);
  padding:2px 7px;border-radius:20px;
  text-transform:uppercase;
}
.topbar-search{
  flex:1;max-width:420px;
  display:flex;align-items:center;gap:9px;
  border:1px solid var(--line);
  border-radius:8px;
  padding:8px 12px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.topbar-search:focus-within{
  border-color:var(--green-line);
  box-shadow:0 0 0 3px var(--green-glow);
}
.topbar-search svg{flex-shrink:0;opacity:0.5;}
.topbar-search input{width:100%;font-size:0.85rem;color:var(--text);}
.topbar-search input::placeholder{color:var(--text-dimmer);}

.topbar-right{margin-left:auto;display:flex;align-items:center;gap:14px;}
.icon-btn{
  width:36px;height:36px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);
  color:var(--text-dim);
  transition:border-color .2s ease, color .2s ease;
  position:relative;
}
.icon-btn:hover{border-color:var(--green-line);color:var(--white);}
.icon-btn .dot{
  position:absolute;top:6px;right:6px;
  width:6px;height:6px;border-radius:50%;
  background:var(--green);
  box-shadow:0 0 6px var(--green);
}

.avatar-menu{position:relative;}
.avatar-btn{
  display:flex;align-items:center;gap:8px;
  padding:5px 10px 5px 5px;
  border:1px solid var(--line);
  border-radius:30px;
  transition:border-color .2s ease;
}
.avatar-btn:hover{border-color:var(--green-line);}
.avatar-circle{
  width:26px;height:26px;border-radius:50%;
  background:var(--surface-2);
  border:1px solid var(--green-line);
  display:flex;align-items:center;justify-content:center;
  font-size:0.7rem;font-weight:700;color:var(--green);
  font-family:var(--font-mono);
}
.avatar-btn .uname{font-size:0.82rem;color:var(--text);}
.avatar-btn svg{opacity:0.5;transition:transform .2s ease;}
.avatar-menu.open .avatar-btn svg{transform:rotate(180deg);}

.avatar-dropdown{
  position:absolute;top:calc(100% + 10px);right:0;
  min-width:210px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:10px;
  padding:6px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  box-shadow:0 20px 40px rgba(0,0,0,0.5);
}
.avatar-menu.open .avatar-dropdown{opacity:1;visibility:visible;transform:translateY(0);}
.dd-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 10px;border-radius:7px;
  font-size:0.84rem;color:var(--text);
  transition:background .15s ease;
}
.dd-item:hover{background:var(--surface-2);}
.dd-item svg{opacity:0.6;width:15px;height:15px;flex-shrink:0;}
.dd-item.root-link{color:var(--green);}
.dd-item.root-link svg{opacity:1;}
.dd-sep{height:1px;background:var(--line);margin:6px 4px;}
.dd-item.danger{color:var(--red);}

/* ---------------------------------------------------------------------- */
/* Shell layout                                                            */
/* ---------------------------------------------------------------------- */
.shell{display:flex;min-height:calc(100vh - 60px);}

/* ---------------------------------------------------------------------- */
/* View transitions                                                       */
/* ---------------------------------------------------------------------- */
.view{
  width:100%;
  animation:viewIn .38s cubic-bezier(.2,.7,.2,1);
}
.view.hidden{display:none;}
@keyframes viewIn{
  from{opacity:0; transform:translateY(10px);}
  to{opacity:1; transform:translateY(0);}
}

/* ---------------------------------------------------------------------- */
/* Dashboard view                                                          */
/* ---------------------------------------------------------------------- */
.dash-wrap{max-width:1180px;margin:0 auto;padding:40px 28px 80px;width:100%;}
.dash-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:26px;flex-wrap:wrap;gap:14px;}
.dash-head h1{font-size:1.5rem;font-weight:600;letter-spacing:-0.01em;}
.dash-head p{color:var(--text-dim);font-size:0.88rem;margin-top:4px;}
.dash-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:32px;
}
.dash-stat{
  border:1px solid var(--line);border-radius:10px;padding:16px 18px;
  transition:border-color .2s ease;
}
.dash-stat:hover{border-color:var(--green-line);}
.dash-stat .num{font-family:var(--font-mono);font-size:1.5rem;font-weight:500;}
.dash-stat .lbl{font-size:0.76rem;color:var(--text-dim);margin-top:4px;}

.server-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;
}
.server-card{
  border:1px solid var(--line);
  border-radius:12px;
  padding:18px 20px;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
  opacity:0; animation:cardIn .5s ease forwards;
}
.server-grid .server-card:nth-child(1){animation-delay:.03s;}
.server-grid .server-card:nth-child(2){animation-delay:.09s;}
.server-grid .server-card:nth-child(3){animation-delay:.15s;}
.server-grid .server-card:nth-child(4){animation-delay:.21s;}
.server-grid .server-card:nth-child(5){animation-delay:.27s;}
@keyframes cardIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
.server-card:hover{
  border-color:var(--green-line);
  transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(0,0,0,0.45), 0 0 0 1px var(--green-glow) inset;
}
.server-card::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%), var(--green-glow), transparent 60%);
  opacity:0;transition:opacity .3s ease;pointer-events:none;
}
.server-card:hover::after{opacity:1;}
.sc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.sc-name-wrap{display:flex;align-items:center;gap:9px;min-width:0;}
.status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.status-dot.online{background:var(--green);box-shadow:0 0 0 0 var(--green-glow);animation:pulseDot 2s infinite;}
.status-dot.offline{background:var(--text-dimmer);}
.status-dot.starting{background:var(--amber);animation:pulseAmber 1.2s infinite;}
@keyframes pulseDot{
  0%{box-shadow:0 0 0 0 rgba(57,255,134,0.45);}
  70%{box-shadow:0 0 0 7px rgba(57,255,134,0);}
  100%{box-shadow:0 0 0 0 rgba(57,255,134,0);}
}
@keyframes pulseAmber{
  0%,100%{opacity:1;}50%{opacity:.4;}
}
.sc-name{font-weight:600;font-size:0.98rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sc-plan{
  font-family:var(--font-mono);font-size:0.62rem;letter-spacing:0.06em;
  color:var(--green);border:1px solid var(--green-line);
  padding:2px 7px;border-radius:20px;text-transform:uppercase;flex-shrink:0;
}
.sc-addr{font-family:var(--font-mono);font-size:0.76rem;color:var(--text-dim);margin-bottom:16px;}
.sc-bars{display:flex;flex-direction:column;gap:8px;}
.sc-bar-row{display:flex;align-items:center;gap:10px;}
.sc-bar-label{width:34px;font-size:0.68rem;color:var(--text-dimmer);font-family:var(--font-mono);flex-shrink:0;}
.sc-bar-track{flex:1;height:4px;border-radius:3px;background:var(--surface-3);overflow:hidden;}
.sc-bar-fill{height:100%;border-radius:3px;background:var(--green);width:0;transition:width 1s cubic-bezier(.2,.8,.2,1);}
.sc-bar-fill.warn{background:var(--amber);}
.sc-bar-val{width:52px;text-align:right;font-size:0.68rem;color:var(--text-dim);font-family:var(--font-mono);flex-shrink:0;}

.empty-note{
  text-align:center;padding:60px 20px;color:var(--text-dim);font-size:0.88rem;
  border:1px dashed var(--line);border-radius:12px;
}

/* ---------------------------------------------------------------------- */
/* Server view                                                             */
/* ---------------------------------------------------------------------- */
.server-view-shell{display:flex;width:100%;}
.sv-sidebar{
  width:220px;flex-shrink:0;
  border-right:1px solid var(--line);
  padding:22px 12px;
  display:flex;flex-direction:column;gap:2px;
  min-height:calc(100vh - 60px);
}
.sv-back{
  display:flex;align-items:center;gap:8px;
  font-size:0.8rem;color:var(--text-dim);
  padding:6px 10px;margin-bottom:14px;border-radius:7px;
  transition:color .2s ease, background .2s ease;
}
.sv-back:hover{color:var(--white);background:var(--surface);}
.sv-serverinfo{padding:0 10px 16px;border-bottom:1px solid var(--line);margin-bottom:12px;}
.sv-serverinfo .sc-name{display:block;margin-bottom:4px;}
.sv-serverinfo .sc-addr{margin-bottom:0;font-size:0.7rem;}
.sv-nav-item{
  display:flex;align-items:center;gap:11px;
  padding:9px 11px;border-radius:8px;
  font-size:0.85rem;color:var(--text-dim);
  border:1px solid transparent;
  transition:color .18s ease, border-color .18s ease, background .18s ease;
}
.sv-nav-item svg{width:16px;height:16px;flex-shrink:0;opacity:0.75;}
.sv-nav-item:hover{color:var(--white);background:var(--surface);}
.sv-nav-item.active{
  color:var(--white);
  border-color:var(--green-line);
  background:var(--surface);
}
.sv-nav-item.active svg{opacity:1;color:var(--green);}
.sv-nav-item.active .nav-indicator{
  position:absolute;
}

.sv-main{flex:1;min-width:0;padding:26px 30px 60px;}
.sv-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:22px;flex-wrap:wrap;}
.sv-crumb{font-size:0.78rem;color:var(--text-dim);margin-bottom:6px;}
.sv-crumb a:hover{color:var(--white);}
.sv-crumb .sep{margin:0 6px;color:var(--text-dimmer);}
.sv-title{display:flex;align-items:center;gap:10px;}
.sv-title h1{font-size:1.3rem;font-weight:600;}

.power-controls{display:flex;gap:8px;}
.pbtn{
  display:flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:8px;font-size:0.8rem;font-weight:500;
  border:1px solid var(--line);color:var(--text-dim);
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.pbtn svg{width:14px;height:14px;}
.pbtn:hover{color:var(--white);border-color:var(--green-line);}
.pbtn.start:hover{color:var(--green);border-color:var(--green-line);background:var(--green-glow);}
.pbtn.stop:hover{color:var(--red);border-color:var(--red-line);}
.pbtn.active-state{color:var(--green);border-color:var(--green-line);}

.stat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px;}
.stat-pill{border:1px solid var(--line);border-radius:10px;padding:12px 14px;}
.stat-pill .lbl{font-size:0.68rem;color:var(--text-dimmer);text-transform:uppercase;letter-spacing:0.05em;font-family:var(--font-mono);}
.stat-pill .val{font-family:var(--font-mono);font-size:1.05rem;margin-top:5px;font-weight:500;}
.stat-pill svg{float:right;opacity:.4;}

.graph-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px;}
.graph-card{border:1px solid var(--line);border-radius:10px;padding:14px 16px;}
.graph-card .gc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.graph-card .gc-top span{font-size:0.76rem;color:var(--text-dim);}
.graph-card .gc-top b{font-family:var(--font-mono);font-size:0.85rem;color:var(--white);font-weight:500;}
.graph-card svg{display:block;width:100%;height:54px;}

/* console */
.console-box{
  border:1px solid var(--line);
  border-radius:10px;
  background:#030303;
  overflow:hidden;
}
.console-output{
  height:360px;overflow-y:auto;
  padding:16px 18px;
  font-family:var(--font-mono);
  font-size:0.78rem;line-height:1.7;
}
.console-line{white-space:pre-wrap;word-break:break-word;opacity:0;animation:lineIn .25s ease forwards;}
@keyframes lineIn{from{opacity:0;transform:translateY(3px);}to{opacity:1;transform:translateY(0);}}
.console-line .t{color:var(--text-dimmer);}
.console-line .lvl-info{color:var(--text-dim);}
.console-line .lvl-ok{color:var(--green);}
.console-line .lvl-warn{color:var(--amber);}
.console-line .lvl-cmd{color:var(--white);}
.console-line .lvl-cmd::before{content:'❯ ';color:var(--green);}
.console-input-row{
  display:flex;align-items:center;gap:10px;
  border-top:1px solid var(--line);
  padding:10px 16px;
}
.console-input-row .prompt{color:var(--green);font-family:var(--font-mono);font-size:0.82rem;}
.console-input-row input{flex:1;font-family:var(--font-mono);font-size:0.82rem;color:var(--white);}
.console-input-row input::placeholder{color:var(--text-dimmer);}
.console-caret{display:inline-block;width:7px;height:14px;background:var(--green);vertical-align:-2px;animation:caretBlink 1s steps(1) infinite;}
@keyframes caretBlink{0%,49%{opacity:1;}50%,100%{opacity:0;}}

/* section heading inside server view */
.sv-section-title{font-size:0.95rem;font-weight:600;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between;}
.sv-section-title .hint{font-size:0.76rem;color:var(--text-dim);font-weight:400;}

/* generic outline button */
.btn-outline{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 16px;border-radius:8px;
  border:1px solid var(--green-line);
  color:var(--green);font-size:0.82rem;font-weight:500;
  transition:background .2s ease, border-color .2s ease;
}
.btn-outline:hover{background:var(--green-glow);border-color:var(--green);}
.btn-outline.neutral{border-color:var(--line);color:var(--text);}
.btn-outline.neutral:hover{border-color:var(--text-dimmer);background:var(--surface-2);}
.btn-outline.danger{border-color:var(--red-line);color:var(--red);}
.btn-outline.danger:hover{background:rgba(255,92,92,0.1);border-color:var(--red);}
.btn-outline svg{width:14px;height:14px;}

/* generic data table */
.data-table{width:100%;border-collapse:collapse;}
.data-table thead th{
  text-align:left;font-size:0.68rem;text-transform:uppercase;letter-spacing:0.06em;
  color:var(--text-dimmer);font-weight:500;padding:10px 14px;border-bottom:1px solid var(--line);
}
.data-table tbody td{
  padding:12px 14px;font-size:0.85rem;border-bottom:1px solid var(--line-soft);color:var(--text);
}
.data-table tbody tr{transition:background .15s ease;}
.data-table tbody tr:hover{background:var(--surface);}
.data-table tbody tr:last-child td{border-bottom:none;}
.file-name{display:flex;align-items:center;gap:9px;}
.file-name svg{flex-shrink:0;}
.file-name .folder-icon{color:var(--green);}
.file-name .file-icon{color:var(--text-dim);}
.dim{color:var(--text-dim);}
.mono-cell{font-family:var(--font-mono);font-size:0.78rem;color:var(--text-dim);}

.breadcrumb-path{display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:0.8rem;color:var(--text-dim);margin-bottom:14px;}
.breadcrumb-path span:last-child{color:var(--white);}
.breadcrumb-path .sep{color:var(--text-dimmer);}

.toggle{
  width:36px;height:20px;border-radius:20px;border:1px solid var(--line);
  position:relative;transition:border-color .2s ease, background .2s ease;flex-shrink:0;
}
.toggle::after{
  content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
  background:var(--text-dimmer);transition:transform .2s ease, background .2s ease;
}
.toggle.on{border-color:var(--green-line);background:var(--green-glow);}
.toggle.on::after{transform:translateX(16px);background:var(--green);}

.badge{
  font-family:var(--font-mono);font-size:0.62rem;letter-spacing:0.05em;
  padding:2px 8px;border-radius:20px;text-transform:uppercase;
  border:1px solid var(--line);color:var(--text-dim);
}
.badge.green{border-color:var(--green-line);color:var(--green);}
.badge.primary-ip{border-color:var(--green-line);color:var(--green);}

.field-group{margin-bottom:18px;max-width:420px;}
.field-group label{display:block;font-size:0.78rem;color:var(--text-dim);margin-bottom:7px;}
.field-input{
  width:100%;border:1px solid var(--line);border-radius:8px;padding:10px 12px;
  font-size:0.85rem;color:var(--white);transition:border-color .2s ease, box-shadow .2s ease;
}
.field-input:focus{border-color:var(--green-line);box-shadow:0 0 0 3px var(--green-glow);}
.select-input{
  width:100%;border:1px solid var(--line);border-radius:8px;padding:10px 12px;
  font-size:0.85rem;color:var(--white);background:var(--surface);
}

.danger-zone{
  border:1px solid var(--red-line);border-radius:10px;padding:18px 20px;margin-top:30px;
}
.danger-zone h3{font-size:0.9rem;color:var(--red);margin-bottom:6px;}
.danger-zone p{font-size:0.8rem;color:var(--text-dim);margin-bottom:14px;max-width:480px;}

.tab-pane{display:none;}
.tab-pane.active{display:block;animation:viewIn .3s ease;}

/* ---------------------------------------------------------------------- */
/* Admin panel specific                                                    */
/* ---------------------------------------------------------------------- */
.admin-shell{display:flex;width:100%;}
.admin-sidebar{
  width:230px;flex-shrink:0;border-right:1px solid var(--line);
  padding:22px 12px;min-height:calc(100vh - 60px);
}
.admin-sidebar .grp-label{
  font-size:0.65rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-dimmer);
  padding:14px 11px 6px;
}
.admin-main{flex:1;min-width:0;padding:28px 32px 70px;max-width:1200px;}
.admin-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:28px;}
.admin-stat{border:1px solid var(--line);border-radius:10px;padding:18px 20px;transition:border-color .2s ease;}
.admin-stat:hover{border-color:var(--green-line);}
.admin-stat .top-row{display:flex;justify-content:space-between;align-items:flex-start;}
.admin-stat svg{opacity:.5;}
.admin-stat .num{font-family:var(--font-mono);font-size:1.7rem;font-weight:500;margin-top:10px;}
.admin-stat .lbl{font-size:0.78rem;color:var(--text-dim);margin-top:3px;}
.admin-stat .delta{font-size:0.7rem;color:var(--green);margin-top:8px;font-family:var(--font-mono);}

.panel-block{border:1px solid var(--line);border-radius:12px;margin-bottom:22px;overflow:hidden;}
.panel-block-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--line);
}
.panel-block-head h2{font-size:0.92rem;font-weight:600;}
.panel-block-body{padding:6px 8px;}
.panel-block-body.pad{padding:18px 20px;}

.node-bar-track{width:100px;height:5px;border-radius:3px;background:var(--surface-3);overflow:hidden;display:inline-block;vertical-align:middle;margin-right:8px;}
.node-bar-fill{height:100%;background:var(--green);border-radius:3px;}

/* ---------------------------------------------------------------------- */
/* Responsive                                                              */
/* ---------------------------------------------------------------------- */
@media (max-width:980px){
  .dash-stats{grid-template-columns:repeat(2,1fr);}
  .admin-stat-grid{grid-template-columns:repeat(2,1fr);}
  .stat-strip{grid-template-columns:repeat(2,1fr);}
  .graph-row{grid-template-columns:1fr;}
  .sv-sidebar, .admin-sidebar{width:64px;}
  .sv-sidebar .lbl-text, .admin-sidebar .lbl-text{display:none;}
  .topbar .brand span.brand-name{display:none;}
}
@media (max-width:640px){
  .topbar-search{display:none;}
  .server-view-shell{flex-direction:column;}
  .sv-sidebar{width:100%;flex-direction:row;overflow-x:auto;min-height:auto;border-right:none;border-bottom:1px solid var(--line);padding:10px 12px;}
  .sv-serverinfo, .sv-back{display:none;}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;}
}