/* ── Luunix Dashboard — Matching luunix.com design ── */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0a0a0f;
  --bg2:#111118;
  --text:#e8e6e3;
  --text2:#8a8698;
  --text3:#5a5670;
  --accent:#a89ec9;
  --accent2:#7b6fa0;
  --card:#15151f;
  --card-border:#1e1e2e;
  --card-hover:#1a1a28;
  --moon:#c9b8ff;
  --green:#4ade80;
  --green-glow:rgba(74,222,128,.5);
  --red:#f87171;
  --yellow:#fbbf24;
  --blue:#60a5fa;
  --radius:16px;
  --radius-sm:10px;
  --mono:'SF Mono',Monaco,'Cascadia Code','Fira Code',monospace;
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  line-height:1.6;
  overflow-x:hidden;
  min-height:100vh;
}
a{color:var(--accent);text-decoration:none;transition:color .3s}
a:hover{color:var(--text)}

/* ── Stars ── */
.stars-layer{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;will-change:transform}
.star{
  position:absolute;border-radius:50%;background:#fff;
  animation:twinkle var(--dur,3s) ease-in-out infinite;
  animation-delay:var(--delay,0s);
}
@keyframes twinkle{0%,100%{opacity:.1}50%{opacity:.55}}

.shooting-star{
  position:fixed;width:120px;height:1px;
  background:linear-gradient(90deg,rgba(200,180,255,.7),transparent);
  border-radius:1px;opacity:0;pointer-events:none;z-index:0;
  transform:rotate(-35deg);
  animation:shoot var(--shoot-dur,1.2s) ease-out forwards;
}
@keyframes shoot{
  0%{opacity:0;transform:rotate(-35deg) translateX(0)}
  10%{opacity:1}70%{opacity:.6}
  100%{opacity:0;transform:rotate(-35deg) translateX(500px)}
}

/* Ambient glow */
.glow{
  position:fixed;width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(120,100,180,.06) 0%,transparent 70%);
  top:50%;left:50%;transform:translate(-50%,-50%);
  pointer-events:none;z-index:0;
  animation:drift 20s ease-in-out infinite;
}
@keyframes drift{
  0%,100%{transform:translate(-50%,-50%)}
  25%{transform:translate(-40%,-55%)}
  50%{transform:translate(-55%,-45%)}
  75%{transform:translate(-45%,-50%)}
}

/* ── Auth Screen ── */
.auth-screen{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  padding:1.5rem;
}
.auth-box{
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:var(--radius);
  padding:2.5rem;
  width:100%;max-width:380px;
  text-align:center;
  position:relative;z-index:1;
  animation:fadeUp .5s ease;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.auth-moon{font-size:3rem;margin-bottom:1rem;display:block;filter:drop-shadow(0 0 30px rgba(200,180,255,.25))}
.auth-title{
  font-size:1.5rem;font-weight:200;letter-spacing:.12em;
  background:linear-gradient(135deg,#e8e6e3,#a89ec9);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;margin-bottom:.3rem;
}
.auth-subtitle{color:var(--text2);font-size:.9rem;margin-bottom:2rem;letter-spacing:.04em}
.auth-input{
  width:100%;padding:.85rem 1rem;
  background:var(--bg);border:1px solid var(--card-border);
  border-radius:var(--radius-sm);color:var(--text);
  font-size:.95rem;font-family:var(--font);
  outline:none;transition:border-color .3s;
  margin-bottom:.8rem;
}
.auth-input:focus{border-color:var(--accent2)}
.auth-input::placeholder{color:var(--text3)}
.auth-btn{
  width:100%;padding:.85rem;margin-top:.5rem;
  background:linear-gradient(135deg,var(--accent2),var(--accent));
  border:none;border-radius:var(--radius-sm);
  color:#fff;font-size:.95rem;font-weight:500;
  letter-spacing:.06em;cursor:pointer;
  transition:opacity .3s,transform .15s;
}
.auth-btn:hover{opacity:.9}
.auth-btn:active{transform:scale(.98)}
.auth-error{color:var(--red);font-size:.85rem;margin-top:.8rem;min-height:1.2em}

/* Language selector */
.lang-screen{
  position:fixed;inset:0;z-index:110;
  display:flex;align-items:center;justify-content:center;
  padding:1.5rem;
}
.lang-box{
  background:var(--card);border:1px solid var(--card-border);
  border-radius:var(--radius);padding:2.5rem;
  width:100%;max-width:360px;text-align:center;
  position:relative;z-index:1;animation:fadeUp .5s ease;
}
.lang-title{font-size:1.3rem;font-weight:200;letter-spacing:.1em;color:var(--text);margin-bottom:.3rem}
.lang-sub{color:var(--text2);font-size:.85rem;margin-bottom:2rem}
.lang-options{display:flex;flex-direction:column;gap:.8rem}
.lang-opt{
  padding:1rem;background:var(--bg);
  border:1px solid var(--card-border);border-radius:var(--radius-sm);
  color:var(--text);font-size:1rem;cursor:pointer;
  transition:border-color .3s,background .3s;
  display:flex;align-items:center;justify-content:center;gap:.6rem;
}
.lang-opt:hover{border-color:var(--accent2);background:var(--card-hover)}

/* ── Layout ── */
.app{display:none;position:relative;z-index:1;min-height:100vh}

/* Top bar */
.topbar{
  position:fixed;top:0;left:0;right:0;height:56px;
  background:rgba(10,10,15,.85);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--card-border);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 1.5rem;z-index:50;
}
.topbar-brand{display:flex;align-items:center;gap:.6rem}
.topbar-moon{font-size:1.4rem}
.topbar-name{
  font-size:1rem;font-weight:300;letter-spacing:.12em;
  color:var(--text);
}
.topbar-actions{display:flex;align-items:center;gap:1rem}
.topbar-btn{
  background:none;border:1px solid var(--card-border);
  border-radius:var(--radius-sm);padding:.4rem .8rem;
  color:var(--text2);font-size:.8rem;cursor:pointer;
  transition:border-color .3s,color .3s;font-family:var(--font);
}
.topbar-btn:hover{border-color:var(--accent2);color:var(--text)}

/* Nav tabs — horizontal */
.nav-tabs{
  position:fixed;top:56px;left:0;right:0;
  background:rgba(10,10,15,.8);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--card-border);
  display:flex;align-items:center;
  padding:0 1.5rem;gap:0;
  overflow-x:auto;z-index:49;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.nav-tabs::-webkit-scrollbar{display:none}
.nav-tab{
  padding:.75rem 1.2rem;
  color:var(--text2);font-size:.85rem;
  letter-spacing:.04em;cursor:pointer;
  white-space:nowrap;
  border-bottom:2px solid transparent;
  transition:color .3s,border-color .3s;
  display:flex;align-items:center;gap:.5rem;
}
.nav-tab:hover{color:var(--text)}
.nav-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.nav-tab svg{width:16px;height:16px;opacity:.7}
.nav-tab.active svg{opacity:1}

/* Main content */
.main{
  padding-top:120px;
  padding-bottom:2rem;
  max-width:1100px;
  margin:0 auto;
  padding-left:1.5rem;
  padding-right:1.5rem;
}

/* Page header */
.page-header{margin-bottom:2rem}
.page-title{
  font-size:1.5rem;font-weight:200;
  letter-spacing:.1em;color:var(--accent);
  margin-bottom:.3rem;
}
.page-sub{color:var(--text2);font-size:.9rem}

/* ── Cards ── */
.card{
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:var(--radius);
  padding:1.5rem;
  transition:border-color .3s,box-shadow .3s;
}
.card:hover{
  border-color:var(--accent2);
  box-shadow:0 8px 30px rgba(120,100,180,.06);
}
.card-title{
  font-size:.8rem;color:var(--text2);
  letter-spacing:.06em;text-transform:uppercase;
  margin-bottom:1rem;
}

/* Grids */
.grid{display:grid;gap:1.2rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

/* Metric card */
.metric{text-align:center;padding:1.5rem 1rem}
.metric-icon{font-size:1.5rem;margin-bottom:.6rem;display:block}
.metric-value{
  font-size:1.8rem;font-weight:300;
  font-family:var(--mono);
  letter-spacing:.02em;
  margin-bottom:.2rem;
}
.metric-value.green{color:var(--green)}
.metric-value.accent{color:var(--accent)}
.metric-value.yellow{color:var(--yellow)}
.metric-value.blue{color:var(--blue)}
.metric-label{font-size:.8rem;color:var(--text2);letter-spacing:.04em}

/* Gauge */
.gauge{
  width:100px;height:100px;margin:0 auto .8rem;
  position:relative;
}
.gauge svg{width:100%;height:100%;transform:rotate(-90deg)}
.gauge-track{fill:none;stroke:var(--card-border);stroke-width:6}
.gauge-fill{fill:none;stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset .8s ease}
.gauge-val{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;font-weight:300;font-family:var(--mono);
}

/* Session list */
.session-item{
  display:flex;align-items:center;gap:1rem;
  padding:.8rem 1rem;border-radius:var(--radius-sm);
  transition:background .2s;border-bottom:1px solid rgba(30,30,46,.5);
}
.session-item:last-child{border-bottom:none}
.session-item:hover{background:var(--card-hover)}
.session-dot{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;
}
.session-dot.active{background:var(--green);box-shadow:0 0 6px var(--green-glow)}
.session-dot.idle{background:var(--text3)}
.session-info{flex:1;min-width:0}
.session-label{font-size:.9rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.session-meta{font-size:.75rem;color:var(--text2);font-family:var(--mono);display:flex;gap:.8rem;flex-wrap:wrap}
.session-msg{font-size:.8rem;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px}

/* Cron */
.cron-item{
  display:flex;align-items:center;gap:1rem;
  padding:.8rem 1rem;border-radius:var(--radius-sm);
  border-bottom:1px solid rgba(30,30,46,.5);
}
.cron-item:last-child{border-bottom:none}
.cron-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.cron-dot.on{background:var(--green);box-shadow:0 0 6px var(--green-glow)}
.cron-dot.off{background:var(--text3)}
.cron-info{flex:1;min-width:0}
.cron-name{font-size:.9rem;color:var(--text)}
.cron-schedule{font-size:.75rem;color:var(--text2);font-family:var(--mono)}
.cron-status{font-size:.75rem;color:var(--text2)}

/* Service */
.svc-item{
  display:flex;align-items:center;gap:.8rem;
  padding:.6rem 0;
}
.svc-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.svc-dot.up{background:var(--green);box-shadow:0 0 6px var(--green-glow)}
.svc-dot.down{background:var(--red)}
.svc-name{font-size:.9rem;color:var(--text);font-family:var(--mono)}

/* Git */
.git-item{
  display:flex;align-items:center;gap:.8rem;
  padding:.6rem 1rem;border-radius:var(--radius-sm);
  border-bottom:1px solid rgba(30,30,46,.5);
  font-size:.85rem;
}
.git-item:last-child{border-bottom:none}
.git-hash{font-family:var(--mono);color:var(--accent);font-size:.8rem;flex-shrink:0}
.git-msg{color:var(--text);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.git-repo{font-family:var(--mono);color:var(--text3);font-size:.75rem;flex-shrink:0}
.git-time{font-size:.75rem;color:var(--text3);flex-shrink:0}

/* Memory */
.mem-item{
  display:flex;align-items:center;justify-content:space-between;
  padding:.7rem 1rem;border-radius:var(--radius-sm);
  cursor:pointer;transition:background .2s;
  border-bottom:1px solid rgba(30,30,46,.5);
}
.mem-item:last-child{border-bottom:none}
.mem-item:hover{background:var(--card-hover)}
.mem-name{font-size:.9rem;color:var(--text);font-family:var(--mono)}
.mem-meta{font-size:.75rem;color:var(--text2)}
.mem-content{
  background:var(--bg);border:1px solid var(--card-border);
  border-radius:var(--radius-sm);padding:1rem;
  margin-top:.8rem;font-size:.8rem;
  font-family:var(--mono);color:var(--text2);
  line-height:1.7;white-space:pre-wrap;
  max-height:400px;overflow-y:auto;
}

/* Bar chart */
.bar-chart{display:flex;align-items:flex-end;gap:4px;min-height:100px}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px}
.bar{
  width:100%;max-width:36px;border-radius:3px 3px 0 0;min-height:2px;
  background:linear-gradient(180deg,var(--accent),var(--accent2));
  transition:height .4s ease;cursor:pointer;
}
.bar:hover{filter:brightness(1.2);box-shadow:0 0 10px rgba(168,158,201,.3)}
.bar-label{font-size:.65rem;color:var(--text3);font-family:var(--mono)}
.bar-val{font-size:.65rem;color:var(--text2);font-family:var(--mono)}

/* Sparkline */
.sparkline{display:flex;align-items:flex-end;gap:1px;height:28px}
.spark-bar{flex:1;background:var(--accent);border-radius:1px;opacity:.5;min-width:2px;transition:height .3s}

/* Toast */
.toast-container{position:fixed;bottom:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:8px}
.toast{
  padding:12px 16px;border-radius:var(--radius-sm);
  background:var(--card);backdrop-filter:blur(12px);
  border:1px solid var(--card-border);
  box-shadow:0 8px 24px rgba(0,0,0,.3);
  display:flex;align-items:center;gap:8px;font-size:.85rem;
  animation:slideInR .3s ease;
}
.toast.success{border-left:3px solid var(--green)}
.toast.error{border-left:3px solid var(--red)}
@keyframes slideInR{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}

/* Scrollbar */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--card-border);border-radius:2px}
::-webkit-scrollbar-thumb:hover{background:var(--accent2)}

/* ── Responsive ── */
@media(max-width:768px){
  .topbar{padding:0 1rem;height:50px}
  .topbar-name{font-size:.85rem;letter-spacing:.08em}
  .nav-tabs{top:50px;padding:0 .5rem}
  .nav-tab{padding:.6rem .8rem;font-size:.8rem}
  .nav-tab svg{display:none}
  .main{padding-top:100px;padding-left:1rem;padding-right:1rem}
  .page-title{font-size:1.2rem}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .metric{padding:1rem .8rem}
  .metric-value{font-size:1.4rem}
  .metric-icon{font-size:1.2rem}
  .gauge{width:70px;height:70px}
  .gauge-val{font-size:1rem}
  .session-msg{max-width:150px}
  .card{padding:1.2rem}
  .auth-box{padding:2rem 1.5rem}
  .bar-chart{min-height:70px}
  .git-item{flex-wrap:wrap;gap:.4rem}
  .git-repo,.git-time{font-size:.7rem}
}

@media(max-width:400px){
  .grid-4{grid-template-columns:1fr}
  .topbar-name{display:none}
  .nav-tab{padding:.5rem .6rem;font-size:.75rem}
}

/* Utility */
.hidden{display:none!important}
.text-muted{color:var(--text2)}
.mono{font-family:var(--mono)}