/* ── LK0NOD Dashboard – Shared Styles ── */
:root {
  --bg: #070b14;
  --surface: #0e1525;
  --card: #121b2d;
  --border: #1e2a45;
  --accent: #00d4aa;
  --accent-dim: rgba(0,212,170,0.12);
  --blue: #3b82f6;
  --blue-dim: rgba(59,130,246,0.1);
  --pink: #ec4899;
  --purple: #a855f7;
  --yellow: #f59e0b;
  --text: #e2e8f0;
  --text-muted: #64748b;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(0,0,0,0.4);
}
* { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth }
body {
  background:var(--bg); color:var(--text);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  line-height:1.6; min-height:100vh;
}
::selection { background:var(--accent); color:#000; }
.app { max-width:1200px; margin:0 auto; padding:0 24px; }

/* HEADER */
.header {
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 0; border-bottom:1px solid var(--border);
  flex-wrap:wrap; gap:12px;
}
.header-left { display:flex; align-items:center; gap:14px; }
.logo {
  width:42px; height:42px; background:var(--accent-dim);
  border:1px solid var(--accent); border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:14px; color:var(--accent); letter-spacing:1px;
}
.logo-text { font-weight:800; font-size:18px; color:var(--text); }
.logo-text span { color:var(--accent); }

/* NAV */
nav { display:flex; gap:4px; flex-wrap:wrap; align-items:center; }
nav a, .nav-dd {
  padding:6px 12px; border-radius:6px;
  font-size:13px; font-weight:500; color:var(--text-muted);
  text-decoration:none; transition:all .15s; cursor:pointer;
}
nav a:hover, nav a.active, .nav-dd:hover { color:var(--text); background:var(--card); }
.nav-dd-wrap { position:relative; }
.nav-dd-menu {
  display:none; position:absolute; top:100%; left:0; z-index:50;
  background:var(--card); border:1px solid var(--border); border-radius:8px;
  padding:6px; min-width:160px; box-shadow:0 8px 24px rgba(0,0,0,0.5);
}
.nav-dd-wrap.open .nav-dd-menu { display:flex; flex-direction:column; gap:2px; }
.nav-dd-menu a {
  padding:6px 10px; border-radius:4px; font-size:12px;
  color:var(--text-muted); white-space:nowrap;
}
.nav-dd-menu a:hover { color:var(--text); background:var(--surface); }

/* SECTIONS */
.section { padding:40px 0; }
.section-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:24px; flex-wrap:wrap; gap:8px;
}
.section-title {
  font-size:22px; font-weight:700; color:var(--text);
  display:flex; align-items:center; gap:10px;
}
.section-title .icon { width:8px; height:24px; border-radius:4px; background:var(--accent); display:inline-block; }
.section-sub { font-size:14px; color:var(--text-muted); font-family:'JetBrains Mono',monospace; }

/* QUICK-LINK TOOLBAR */
.toolbar {
  display:flex; flex-direction:column; gap:10px; margin-bottom:32px;
}
.toolbar-top, .toolbar-bottom {
  display:grid; gap:10px;
}
.toolbar-top { grid-template-columns:repeat(5, 1fr); }
.toolbar-bottom { grid-template-columns:repeat(7, 1fr); }
.toolbar a {
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 8px; border-radius:10px;
  background:linear-gradient(180deg,var(--surface),var(--card));
  border:1px solid var(--border);
  color:var(--text); font-size:13px; font-weight:500;
  text-decoration:none; transition:all .2s; text-align:center;
  box-shadow:0 1px 3px rgba(0,0,0,0.06);
  position:relative; overflow:hidden;
}
.toolbar a::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,var(--accent-dim),transparent 60%);
  opacity:0; transition:opacity .25s;
}
.toolbar a:hover {
  border-color:var(--accent); color:var(--accent);
  transform:translateY(-2px);
  box-shadow:0 4px 16px rgba(0,212,170,0.15), 0 2px 6px rgba(0,0,0,0.1);
}
.toolbar a:hover::before { opacity:1; }
.toolbar a:active { transform:translateY(0); }
.toolbar a.active {
  border-color:var(--accent);
  background:linear-gradient(135deg,var(--accent-dim),rgba(0,212,170,0.06));
  color:var(--accent); font-weight:600;
  box-shadow:inset 0 0 20px rgba(0,212,170,0.06), 0 2px 8px rgba(0,212,170,0.1);
}
.toolbar a.active::before { opacity:0.5; }
.toolbar a .ti { font-size:16px; }

/* CARDS */
.grid { display:grid; gap:16px; }
.grid-2 { grid-template-columns:1fr 1fr; }
.grid-3 { grid-template-columns:1fr 1fr 1fr; }
.grid-4 { grid-template-columns:1fr 1fr 1fr 1fr; }
.card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:20px;
  transition:border-color .15s;
}
.card:hover { border-color:rgba(0,212,170,0.3); }
.card-title {
  font-size:13px; font-weight:600; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:0.5px; margin-bottom:12px;
}
.card-value { font-size:28px; font-weight:700; color:var(--text); }
.card-value.green { color:var(--accent); }
.card-value.blue { color:var(--blue); }
.card-value.pink { color:var(--pink); }
.card-value.yellow { color:var(--yellow); }
.card-label { font-size:13px; color:var(--text-muted); margin-top:2px; }

/* TABLE */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:14px; }
th {
  text-align:left; padding:10px 12px;
  font-weight:600; color:var(--text-muted); font-size:12px;
  text-transform:uppercase; letter-spacing:0.5px;
  border-bottom:1px solid var(--border);
}
td {
  padding:10px 12px; border-bottom:1px solid rgba(30,42,69,0.5);
  white-space:nowrap;
}
tr:last-child td { border-bottom:none; }
.status-dot { width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:6px; }
.status-on { background:var(--accent); }
.status-off { background:#ef4444; }

/* HERO */
.hero { padding:60px 0 40px; text-align:center; }
.hero h1 { font-size:36px; font-weight:800; margin-bottom:8px; }
.hero h1 span { color:var(--accent); }
.hero p { font-size:16px; color:var(--text-muted); max-width:600px; margin:0 auto 16px; }
.hero-tags { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; }
.tag {
  padding:4px 14px; border-radius:20px;
  font-size:12px; font-weight:500; background:var(--card);
  color:var(--text-muted); border:1px solid var(--border);
}

/* STATUS BAR */
.status-bar {
  display:flex; flex-wrap:wrap; gap:20px;
  padding:12px 16px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius);
  font-size:13px; margin-bottom:32px;
}
.status-bar-item { display:flex; align-items:center; gap:6px; }
.status-bar-item .label { color:var(--text-muted); }
.status-bar-item .val { color:var(--text); font-weight:500; }

/* BADGE */
.badge {
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 12px; border-radius:20px;
  font-size:12px; font-weight:600;
}
.badge-live { background:var(--accent-dim); color:var(--accent); border:1px solid rgba(0,212,170,0.3); }
.badge-live::before {
  content:''; width:7px; height:7px; border-radius:50%;
  background:var(--accent); animation:pulse 2s infinite;
}
.badge-danger { background:rgba(239,68,68,0.12); color:#ef4444; border:1px solid rgba(239,68,68,0.3); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* NEWS */
.news-list { display:flex; flex-direction:column; gap:4px; }
.news-item {
  display:flex; align-items:center; gap:12px;
  padding:10px 14px; border-radius:8px;
  transition:background .15s; text-decoration:none; color:var(--text);
}
.news-item:hover { background:var(--surface); }
.news-date {
  font-size:13px; color:var(--text-muted); white-space:nowrap;
  font-family:'JetBrains Mono',monospace; flex-shrink:0;
}
.news-text { font-size:14px; }
.news-text a { color:var(--text); text-decoration:none; }
.news-text a:hover { color:var(--accent); }

/* LIVE ROW */
.live-row { transition:background .3s; }
.port-led { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--accent); }
.port-led[data-port] { background:var(--text-muted); }
.port-led[data-port="1"] { background:var(--accent); }
.port-led[data-port="2"] { background:var(--blue); }
.port-led[data-port="3"] { background:var(--yellow); }
.port-led[data-port="6"] { background:var(--pink); }
.live-row:hover { background:var(--surface); }

/* SYSTEM INFO */
.sys-row { display:flex; justify-content:space-between; align-items:baseline; padding:4px 0; font-size:13px; gap:12px; }
.sys-label { color:var(--text-muted); white-space:nowrap; font-size:12px; }
.sys-value { font-weight:600; color:var(--text); }
.sys-bar { height:4px; background:#21262d; border-radius:2px; margin:3px 0 5px; overflow:hidden; }
.sys-bar-fill { height:100%; border-radius:2px; transition:width .5s; }
.sys-bar-fill.ram { background:var(--blue); }
.sys-bar-fill.disk { background:var(--yellow); }
.sys-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.sys-header-left { display:flex; align-items:center; gap:8px; }
.sys-header-right { color:var(--text-muted); font-size:11px; }

/* FOOTER */
footer {
  border-top:1px solid var(--border);
  padding:24px 0; margin-top:20px;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:8px; font-size:13px; color:var(--text-muted);
}
footer a { color:var(--text-muted); text-decoration:none; }
footer a:hover { color:var(--accent); }

/* RESPONSIVE */
@media (max-width:1024px) {
  .r-grid-4{grid-template-columns:1fr 1fr!important}
  .r-grid-3{grid-template-columns:1fr 1fr!important}
  .toolbar-bottom{grid-template-columns:repeat(5,1fr)}
}
@media (max-width:768px) {
  .toolbar-top,.toolbar-bottom{grid-template-columns:repeat(3,1fr)}
  .r-grid-4,.r-grid-3{grid-template-columns:1fr!important}
  .r-grid-2{grid-template-columns:1fr!important}
  .r-flex-wrap{flex-wrap:wrap!important}
  .r-gap-xs{gap:8px!important}
  header.header{flex-direction:column;align-items:stretch}
  nav{justify-content:center}
  nav a,.nav-dd{font-size:12px;padding:5px 8px}
  .nav-dd-menu{right:0;left:auto}
  .hero h1{font-size:28px}
  .section{padding:20px 0}
  .app{padding:0 12px}
  .status-bar{gap:10px;font-size:12px;padding:10px 12px}
  .hero-tags .tag{font-size:11px;padding:3px 10px}
  .r-stack{flex-direction:column!important;align-items:stretch!important}
  .r-hide{display:none!important}
  .r-w100{width:100%!important}
  .r-minw0{min-width:0!important}
  .r-gtc1{grid-template-columns:1fr!important}
  table{font-size:13px}
  th,td{padding:8px 8px!important}
  .card{padding:14px!important}
  .card-value{font-size:22px!important}
  .sys-row{font-size:12px}
}
@media (max-width:600px) {
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .hero h1{font-size:24px}
  .hero p{font-size:14px}
  .section{padding:16px 0}
  .app{padding:0 10px}
  .r-gtc1-xs{grid-template-columns:1fr!important}
  .r-stack-xs{flex-direction:column!important;align-items:stretch!important}
  .r-w100-xs{width:100%!important}
  .r-gap-xs{gap:4px!important}
  .sys-row{gap:6px}
  .news-date{font-size:11px}
  .news-text{font-size:13px}
}
@media (max-width:480px) {
  .toolbar-top,.toolbar-bottom{grid-template-columns:repeat(2,1fr)}
  .toolbar a{padding:10px 6px;font-size:12px}
  .hero h1{font-size:20px}
  .card{padding:10px!important}
  .card-value{font-size:18px!important}
  nav a,.nav-dd{font-size:11px!important;padding:4px 6px!important}
  .status-bar{gap:6px;font-size:11px;padding:8px 10px}
}
#scroll-top {
  position:fixed; bottom:24px; right:24px; z-index:999;
  width:44px; height:44px; border-radius:50%;
  background:var(--accent); color:#000;
  font-size:22px; font-weight:700; line-height:44px;
  text-align:center; cursor:pointer;
  opacity:0; pointer-events:none;
  transition:opacity .25s,transform .25s;
  transform:translateY(12px); box-shadow:0 4px 12px rgba(0,212,170,0.3);
}
#scroll-top.visible { opacity:1; pointer-events:auto; transform:translateY(0) }
#scroll-top:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,212,170,0.5) }
.share-section { display:flex; align-items:center; gap:12px; padding:20px 0 8px; border-top:1px solid var(--border); }
.share-label { font-size:12px; color:var(--text-muted); white-space:nowrap; }
.share-links { display:flex; gap:8px; flex-wrap:wrap; }
.share-btn { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:8px; background:var(--surface); border:1px solid var(--border); text-decoration:none; font-size:16px; cursor:pointer; transition:all .2s; }
.share-btn:hover { background:var(--accent-dim); border-color:var(--accent); transform:translateY(-1px); }