/* ============================================================
   LinkUp · Support & System Assistance
   Theme-aligned with hero / current-release / archive / vc
   ============================================================ */

.lu-sup {
  --sup-bg:        #0a0d18;
  --sup-bg-2:      #0d111e;
  --sup-surface:   rgba(20, 26, 44, 0.55);
  --sup-surface-2: rgba(26, 32, 52, 0.65);
  --sup-text:      #e6ebff;
  --sup-text-dim:  #aab1cb;
  --sup-text-mute: #5b6480;
  --sup-border:    rgba(140, 160, 220, 0.10);
  --sup-border-s:  rgba(140, 160, 220, 0.22);
  --sup-acc:       #4f7df5;
  --sup-acc-2:     #7aa2ff;
  --sup-ok:        #4ade80;
  --sup-warn:      #fbbf24;
  --sup-purple:    #a78bfa;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 120px 24px;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(79,125,245,0.12), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(167,139,250,0.10), transparent 60%),
    linear-gradient(180deg, var(--sup-bg) 0%, var(--sup-bg-2) 100%);
  color: var(--sup-text);
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
}

/* ---------- Ambient ---------- */
.lu-sup__bg { position:absolute; inset:0; z-index:0; pointer-events:none; }
.lu-sup__grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(140,160,220,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(140,160,220,.06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 40%, transparent 90%);
}
.lu-sup__scan {
  position:absolute; inset:0;
  background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(255,255,255,.012) 3px 4px);
  mix-blend-mode: overlay;
}
.lu-sup__orb {
  position:absolute; border-radius:50%; filter: blur(90px); opacity:.55;
  animation: luSupDrift 22s ease-in-out infinite alternate;
}
.lu-sup__orb--a { width:520px; height:520px; top:-160px; left:-120px; background: radial-gradient(circle, rgba(79,125,245,.45), transparent 65%); }
.lu-sup__orb--b { width:480px; height:480px; bottom:-180px; right:-120px; background: radial-gradient(circle, rgba(167,139,250,.35), transparent 65%); animation-delay:-8s; }
.lu-sup__orb--c { width:360px; height:360px; top:40%; left:55%; background: radial-gradient(circle, rgba(74,222,128,.18), transparent 65%); animation-delay:-14s; }
@keyframes luSupDrift { from { transform: translate(0,0); } to { transform: translate(40px,-30px); } }

.lu-sup__container { position:relative; z-index:1; max-width: 1280px; margin: 0 auto; }

/* ---------- Reveal ---------- */
[data-lu-s-reveal] { opacity:0; transform: translateY(18px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
[data-lu-s-reveal].is-in { opacity:1; transform: none; }

/* ---------- Top bar ---------- */
.lu-sup__topbar {
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding: 12px 18px; margin-bottom: 36px;
  border:1px solid var(--sup-border); border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
  backdrop-filter: blur(14px);
  font-size: 12px; color: var(--sup-text-dim);
}
.lu-sup__topbar-left, .lu-sup__topbar-right { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.lu-sup__sig { display:inline-flex; align-items:center; gap:8px; text-transform:uppercase; letter-spacing:.14em; font-size:11px; }
.lu-sup__sig-dot { width:7px; height:7px; border-radius:50%; background: var(--sup-ok); box-shadow: 0 0 10px var(--sup-ok); animation: luSupPulse 2s infinite; }
.lu-sup__topbar-divider { width:1px; height:14px; background: var(--sup-border-s); }
.lu-sup__topbar-mono { font-family: "JetBrains Mono", ui-monospace, monospace; font-size:11px; color: var(--sup-text-mute); }
.lu-sup__topbar-uptime { display:inline-flex; align-items:center; gap:8px; }
.lu-sup__uptime-bar { width:80px; height:5px; border-radius:3px; background: rgba(255,255,255,.06); overflow:hidden; }
.lu-sup__uptime-bar i { display:block; height:100%; width: var(--p,90%); background: linear-gradient(90deg, var(--sup-ok), #34d399); border-radius:inherit; }
@keyframes luSupPulse { 0%,100% { opacity:1; transform:scale(1);} 50% { opacity:.4; transform:scale(1.4);} }

/* ---------- Main grid ---------- */
.lu-sup__main {
  display:grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items:start;
}
@media (max-width: 1024px) { .lu-sup__main { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- Identity ---------- */
.lu-sup__label {
  display:inline-flex; align-items:center; gap:10px;
  padding: 8px 14px; border:1px solid var(--sup-border-s); border-radius: 999px;
  background: rgba(79,125,245,.08); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color: var(--sup-acc-2); margin-bottom: 24px;
}
.lu-sup__label-pulse { width:6px; height:6px; border-radius:50%; background: var(--sup-acc); box-shadow:0 0 10px var(--sup-acc); animation: luSupPulse 2s infinite; }
.lu-sup__label-divider { color: var(--sup-text-mute); }
.lu-sup__label-mono { font-family:"JetBrains Mono",ui-monospace,monospace; color: var(--sup-text-dim); letter-spacing:.05em; text-transform:none; }

.lu-sup__title { font-size: clamp(34px, 4.4vw, 56px); line-height:1.05; letter-spacing:-.02em; font-weight: 600; margin: 0 0 20px; }
.lu-sup__title-accent { background: linear-gradient(120deg, var(--sup-acc) 0%, var(--sup-acc-2) 50%, var(--sup-purple) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lu-sup__sub { color: var(--sup-text-dim); font-size: 16px; line-height:1.65; max-width: 560px; margin: 0 0 32px; }

.lu-sup__actions { display:flex; gap:12px; flex-wrap:wrap; margin-bottom: 28px; }
.lu-sup__btn {
  position:relative; overflow:hidden; cursor:pointer;
  display:inline-flex; align-items:center; gap:10px;
  padding: 12px 20px; border-radius: 12px; font-size: 14px; font-weight:500;
  border:1px solid var(--sup-border-s); transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.lu-sup__btn svg { width:16px; height:16px; }
.lu-sup__btn--primary { background: linear-gradient(135deg, var(--sup-acc), #6691ff); color:#fff; border-color: transparent; box-shadow: 0 8px 28px rgba(79,125,245,.35); }
.lu-sup__btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(79,125,245,.5); }
.lu-sup__btn--ghost { background: var(--sup-surface); color: var(--sup-text); }
.lu-sup__btn--ghost:hover { background: var(--sup-surface-2); border-color: rgba(140,160,220,.35); }
.lu-sup__btn-glow { position:absolute; inset:0; background: radial-gradient(120px 80px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.25), transparent 70%); opacity:0; transition: opacity .25s; pointer-events:none; }
.lu-sup__btn--primary:hover .lu-sup__btn-glow { opacity:1; }

.lu-sup__search {
  position:relative; display:flex; align-items:center; gap:10px;
  padding: 12px 14px; border:1px solid var(--sup-border-s); border-radius: 12px;
  background: var(--sup-surface); transition: border-color .25s, background .25s;
}
.lu-sup__search:focus-within { border-color: var(--sup-acc); background: var(--sup-surface-2); box-shadow: 0 0 0 4px rgba(79,125,245,.12); }
.lu-sup__search-ico { width:16px; height:16px; color: var(--sup-text-mute); }
.lu-sup__search input { flex:1; background:transparent; border:0; outline:0; color: var(--sup-text); font-size:14px; font-family:inherit; }
.lu-sup__search input::placeholder { color: var(--sup-text-mute); }
.lu-sup__search-kbd { font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px; padding:3px 8px; border-radius:6px; background: rgba(140,160,220,.12); color: var(--sup-text-dim); border:1px solid var(--sup-border); }

/* ---------- Status panel ---------- */
.lu-sup__panel {
  position:relative; overflow:hidden;
  padding: 26px; border-radius: 20px;
  border:1px solid var(--sup-border-s);
  background: linear-gradient(180deg, var(--sup-surface-2), var(--sup-surface));
  backdrop-filter: blur(20px);
  box-shadow: 0 24px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);
  transform-style: preserve-3d; transition: transform .4s ease;
}
.lu-sup__panel-glow {
  position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(400px 240px at var(--mx,50%) var(--my,30%), rgba(79,125,245,.18), transparent 60%);
  opacity:0; transition: opacity .35s;
}
.lu-sup__panel:hover .lu-sup__panel-glow { opacity:1; }

.lu-sup__panel-head {
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding-bottom: 18px; margin-bottom: 18px;
  border-bottom: 1px solid var(--sup-border);
}
.lu-sup__panel-eyebrow { font-size:10px; letter-spacing:.16em; text-transform:uppercase; color: var(--sup-text-mute); margin-bottom: 4px; }
.lu-sup__panel-title { font-size: 18px; font-weight:600; }
.lu-sup__panel-ring { position:relative; width:54px; height:54px; }
.lu-sup__panel-ring svg { width:100%; height:100%; transform: rotate(-90deg); }
.lu-sup__panel-ring-bg { fill:none; stroke: rgba(140,160,220,.15); stroke-width:3; }
.lu-sup__panel-ring-fg { fill:none; stroke: var(--sup-ok); stroke-width:3; stroke-linecap:round; stroke-dasharray: 113; stroke-dashoffset: 4; filter: drop-shadow(0 0 6px var(--sup-ok)); animation: luSupRing 4s ease-in-out infinite alternate; }
.lu-sup__panel-ring span { position:absolute; inset:0; display:grid; place-items:center; font-size:10px; font-weight:600; color: var(--sup-ok); letter-spacing:.1em; }
@keyframes luSupRing { from { stroke-dashoffset: 30; } to { stroke-dashoffset: 4; } }

.lu-sup__status-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.lu-sup__status {
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding: 14px 16px; border:1px solid var(--sup-border); border-radius: 12px;
  background: rgba(255,255,255,.015);
  transition: border-color .25s, transform .25s, background .25s;
}
.lu-sup__status:hover { border-color: var(--sup-border-s); transform: translateX(2px); background: rgba(255,255,255,.03); }
.lu-sup__status-left { display:flex; align-items:center; gap:12px; }
.lu-sup__status-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.lu-sup__status--ok .lu-sup__status-dot { background: var(--sup-ok); box-shadow: 0 0 10px var(--sup-ok); animation: luSupPulse 2s infinite; }
.lu-sup__status--active .lu-sup__status-dot { background: var(--sup-acc); box-shadow: 0 0 10px var(--sup-acc); }
.lu-sup__status--ctrl .lu-sup__status-dot { background: var(--sup-warn); box-shadow: 0 0 10px var(--sup-warn); }
.lu-sup__status--net .lu-sup__status-dot { background: var(--sup-purple); box-shadow: 0 0 10px var(--sup-purple); }
.lu-sup__status-k { font-size:14px; font-weight:600; }
.lu-sup__status-meta { font-size:11px; color: var(--sup-text-mute); font-family:"JetBrains Mono",ui-monospace,monospace; }
.lu-sup__status-right { display:flex; align-items:center; gap:12px; }
.lu-sup__status-v { font-size:12px; font-weight:600; padding: 4px 10px; border-radius: 999px; }
.lu-sup__status--ok .lu-sup__status-v { color: var(--sup-ok); background: rgba(74,222,128,.10); border:1px solid rgba(74,222,128,.25); }
.lu-sup__status--active .lu-sup__status-v { color: var(--sup-acc-2); background: rgba(79,125,245,.10); border:1px solid rgba(79,125,245,.25); }
.lu-sup__status--ctrl .lu-sup__status-v { color: var(--sup-warn); background: rgba(251,191,36,.08); border:1px solid rgba(251,191,36,.22); }
.lu-sup__status--net .lu-sup__status-v { color: var(--sup-purple); background: rgba(167,139,250,.10); border:1px solid rgba(167,139,250,.25); }

.lu-sup__status-bar { width:60px; height:5px; border-radius:3px; background: rgba(255,255,255,.06); overflow:hidden; }
.lu-sup__status-bar i { display:block; height:100%; width: var(--p,80%); background: linear-gradient(90deg, var(--sup-acc), var(--sup-acc-2)); border-radius:inherit; transition: width 1s ease; }
.lu-sup__status--ok .lu-sup__status-bar i { background: linear-gradient(90deg, var(--sup-ok), #34d399); }
.lu-sup__status--ctrl .lu-sup__status-bar i { background: linear-gradient(90deg, var(--sup-warn), #f59e0b); }
.lu-sup__status--net .lu-sup__status-bar i { background: linear-gradient(90deg, var(--sup-purple), #c4b5fd); }

.lu-sup__status-spark { display:inline-flex; align-items:flex-end; gap:2px; height:18px; }
.lu-sup__status-spark i { display:block; width:3px; height: var(--h, 50%); background: linear-gradient(180deg, var(--sup-ok), rgba(74,222,128,.3)); border-radius:1px; animation: luSupSpark 2.4s ease-in-out infinite; }
.lu-sup__status-spark i:nth-child(2n) { animation-delay:.3s; }
.lu-sup__status-spark i:nth-child(3n) { animation-delay:.6s; }
@keyframes luSupSpark { 0%,100% { transform: scaleY(.6); } 50% { transform: scaleY(1.1); } }

.lu-sup__panel-foot {
  display:flex; align-items:center; gap:10px;
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--sup-border);
  font-size: 12px; color: var(--sup-text-dim);
}
.lu-sup__panel-foot-pulse { width:6px; height:6px; border-radius:50%; background: var(--sup-ok); animation: luSupPulse 2s infinite; }
.lu-sup__panel-foot-spacer { flex:1; }
.lu-sup__panel-link { color: var(--sup-acc-2); cursor:pointer; transition: color .2s; }
.lu-sup__panel-link:hover { color: var(--sup-acc); }

/* ---------- Channel cards ---------- */
.lu-sup__channels {
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 56px;
}
@media (max-width: 1024px) { .lu-sup__channels { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .lu-sup__channels { grid-template-columns: 1fr; } }

.lu-sup__chan {
  position:relative; overflow:hidden; cursor:pointer;
  padding: 22px; border-radius: 16px;
  border: 1px solid var(--sup-border);
  background: linear-gradient(180deg, var(--sup-surface), rgba(20,26,44,.3));
  backdrop-filter: blur(14px);
  transition: transform .35s ease, border-color .35s ease;
  transform-style: preserve-3d;
}
.lu-sup__chan:hover { border-color: var(--sup-border-s); }
.lu-sup__chan-num { font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10px; letter-spacing:.14em; color: var(--sup-text-mute); margin-bottom: 12px; }
.lu-sup__chan-icon {
  width: 40px; height: 40px; display:grid; place-items:center;
  border-radius: 10px; margin-bottom: 14px;
  background: linear-gradient(135deg, rgba(79,125,245,.18), rgba(79,125,245,.05));
  color: var(--sup-acc-2); border:1px solid rgba(79,125,245,.20);
}
.lu-sup__chan-icon svg { width:20px; height:20px; }
.lu-sup__chan-title { font-size: 16px; font-weight:600; margin: 0 0 6px; }
.lu-sup__chan-text { font-size: 13px; line-height:1.55; color: var(--sup-text-dim); margin:0 0 18px; }
.lu-sup__chan-foot { display:flex; justify-content:space-between; align-items:center; padding-top:14px; border-top:1px solid var(--sup-border); }
.lu-sup__chan-state { display:inline-flex; align-items:center; gap:6px; font-size:11px; color: var(--sup-text-dim); font-family:"JetBrains Mono",ui-monospace,monospace; }
.lu-sup__chan-state i { width:6px; height:6px; border-radius:50%; background: var(--sup-text-mute); }
.lu-sup__chan-state--on i { background: var(--sup-ok); box-shadow: 0 0 8px var(--sup-ok); animation: luSupPulse 2s infinite; }
.lu-sup__chan-state--on { color: var(--sup-ok); }
.lu-sup__chan-state--warn i { background: var(--sup-warn); box-shadow: 0 0 8px var(--sup-warn); }
.lu-sup__chan-state--warn { color: var(--sup-warn); }
.lu-sup__chan-arrow { font-size: 16px; color: var(--sup-text-mute); transition: transform .3s, color .3s; }
.lu-sup__chan:hover .lu-sup__chan-arrow { transform: translateX(4px); color: var(--sup-acc-2); }
.lu-sup__chan-glow {
  position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(220px 160px at var(--mx,50%) var(--my,50%), rgba(79,125,245,.18), transparent 60%);
  opacity:0; transition: opacity .35s;
}
.lu-sup__chan:hover .lu-sup__chan-glow { opacity:1; }