:root{
  --bg: #05060a;
  --card: rgba(255,255,255,0.03);
  --glass: rgba(255,255,255,0.02);
  --text: #cfeee0;
  --muted: #9aa8a0;
  --accent: #00ff88;
  --accent2: #00ffa6;
  --glass-border: rgba(255,255,255,0.04);
  --neon-glow: 0 10px 40px rgba(0,255,150,0.06);
}
:root.theme-blue{ --accent:#45a7ff; --accent2:#8fd6ff; }
:root.theme-purple{ --accent:#b06bff; --accent2:#e7b3ff; }

*{box-sizing:border-box}
body{background:var(--bg);color:var(--text);font-family:Inter,Segoe UI,Roboto,system-ui,Arial;margin:0;-webkit-font-smoothing:antialiased}
a{color:var(--accent)}

.td-root{padding:32px 20px;position:relative;padding-top:calc(var(--navbar-height,72px) + 12px)}

/* subtle global grid + scanlines */
body::before{content:"";position:fixed;inset:0;background-image:linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,0.007) 1px, transparent 1px);background-size:140px 140px,140px 140px;pointer-events:none;mix-blend-mode:overlay;opacity:0.06}
.td-root::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg, rgba(255,255,255,0.01) 0px, rgba(255,255,255,0.006) 1px, transparent 2px);pointer-events:none;opacity:0.04}

.container{max-width:1200px;margin:0 auto}

/* Hero */
.td-hero{display:flex;gap:16px;align-items:center;margin-bottom:20px;position:relative;z-index:5}
.td-hero .logo-frame{width:120px;height:120px;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);display:flex;align-items:center;justify-content:center;border:1px solid var(--glass-border);box-shadow:var(--neon-glow);position:relative;overflow:hidden}
.td-hero .logo-frame:before{content:"";position:absolute;inset:0;border-radius:12px;padding:2px;background:linear-gradient(90deg,var(--accent),transparent,var(--accent2));-webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);opacity:0.12}
.td-hero img{width:86px;height:86px;object-fit:contain}

.td-title{font-family:Share Tech Mono, monospace;font-size:34px;color:var(--accent);line-height:1.05;margin:0}
.title-typing{display:inline-block}
.td-badge{display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,0.2);border:1px solid rgba(255,255,255,0.02);color:var(--accent2);font-family:monospace;margin-left:12px}
.td-sub{color:var(--muted);margin-top:6px;font-size:0.98rem;max-width:64ch}

/* Headline redesign */
.td-meta{display:flex;flex-direction:column;gap:8px}
.td-title-wrap{display:flex;align-items:center;gap:12px}
.td-title{font-family:Share Tech Mono, monospace;font-weight:900;font-size:44px;color:var(--accent);margin:0;letter-spacing:0.6px;text-shadow:0 6px 28px rgba(0,255,160,0.16);line-height:1}
.td-category-badge{display:inline-block;padding:6px 12px;border-radius:999px;background:linear-gradient(90deg, rgba(0,255,150,0.08), rgba(0,200,255,0.06));color:var(--accent2);border:1px solid rgba(0,255,150,0.06);font-weight:700;font-size:0.95rem}
.td-divider{height:6px;width:100%;max-width:420px;margin-top:6px;border-radius:4px;background:linear-gradient(90deg, transparent, rgba(0,255,150,0.06), transparent);box-shadow:0 6px 18px rgba(0,255,150,0.02);}

@media (max-width:880px){
  .td-title{font-size:32px}
  .td-category-badge{font-size:0.9rem;padding:5px 10px}
}
@media (max-width:480px){
  .td-title{font-size:26px}
  .td-divider{max-width:260px}
}

.stats-row{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0}
.stat{background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);padding:10px 12px;border-radius:8px;border:1px solid rgba(255,255,255,0.03);min-width:110px;text-align:center}
.stat strong{display:block;color:var(--accent);font-family:Share Tech Mono}

/* Main columns: left content + aside */
.grid{display:grid;grid-template-columns:1fr 360px;gap:28px;align-items:start}
@media (min-width:981px){
  /* Desktop: wider sidebar and equal-height row so left content stretches to match aside */
  .grid{ grid-template-columns: 1fr 420px; grid-auto-rows: 1fr; }
  /* Make primary left card fill the grid row height and layout its internals vertically */
  .grid > .card:first-child{ height:100%; display:flex; flex-direction:column; }
  /* Keep aside natural flow but allow it to stick under the navbar for long pages */
  .grid > aside.card{ position: sticky; top: calc(var(--navbar-height,72px) + 20px); align-self: start; }
}
@media (max-width:1100px){.grid{grid-template-columns:1fr 320px}}
@media (max-width:980px){.grid{grid-template-columns:1fr}}

/* Card base: glassmorphism + soft neon border */
.card{background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);padding:20px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);backdrop-filter: blur(8px);box-shadow: 0 12px 50px rgba(0,0,0,0.6);position:relative;overflow:hidden;display:flex;flex-direction:column}
.card img{max-width:100%;height:auto;display:block}
.card::before{content:"";position:absolute;inset:-1px;border-radius:13px;padding:2px;background:linear-gradient(90deg,var(--accent),var(--accent2),transparent);opacity:0;transition:opacity .28s, transform .28s;transform:translateY(6px)}
.card::after{content:"";position:absolute;inset:0;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.006), transparent);pointer-events:none}
.card:hover{transform:translateY(-8px);box-shadow:0 20px 80px rgba(0,0,0,0.7), 0 0 32px rgba(0,255,160,0.06);}
.card:hover::before{opacity:1;transform:translateY(0)}

.grid{align-items:start}
.card > *{z-index:2}

/* Prevent cards from forcing full height in the grid; let aside size to content */
.grid > .card, .grid > aside.card{height:auto;align-self:start}

/* Ensure headline/meta sits above backgrounds and overlays */
.td-meta, .td-hero, .td-hero .logo-frame{position:relative;z-index:6}

/* Global card hover — consistent across page */
.card{cursor:pointer;transition:transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s ease, border-color .28s ease, opacity .28s;will-change:transform,box-shadow}
.card::before{ /* subtle border glow */
  content:"";position:absolute;inset:-1px;border-radius:13px;padding:2px;background:linear-gradient(90deg,var(--accent),var(--accent2),transparent);opacity:0;transition:opacity .28s, transform .28s;transform:translateY(6px) scale(1.02);pointer-events:none;z-index:1;filter:blur(8px);
}
.card::after{ /* keep subtle texture layer but non-intrusive */
  content:"";position:absolute;inset:0;border-radius:12px;background:transparent;pointer-events:none;z-index:1;opacity:0;
}
.card:hover{transform:translateY(-10px);box-shadow:0 28px 90px rgba(0,0,0,0.7), 0 0 36px rgba(0,255,160,0.06);border-color:rgba(0,255,140,0.08)}
.card:hover::before{opacity:1;transform:translateY(0) scale(1);}

/* Make cards keyboard-focusable-like hover for accessibility */
.card:focus-within, .card:focus{outline:none;transform:translateY(-8px);box-shadow:0 20px 70px rgba(0,0,0,0.65), 0 0 30px rgba(0,255,160,0.05)}

/* Mini stat hover (Version/License/Updated/Tags) */
.stat{cursor:pointer;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.stat:hover{transform:translateY(-6px);box-shadow:0 18px 50px rgba(0,0,0,0.55);border-color:rgba(0,255,140,0.06)}

/* Ensure command boxes inside cards don't lose pointer interactions for copy buttons */
.cmd{cursor:default}

/* Avoid mouse-follow gradient overlays — keep global cursor glow disabled */
.cursor-glow{display:none !important}

.neon-title{color:var(--accent);text-shadow:0 0 18px var(--accent);font-size:1.05rem;margin:0 0 8px}

/* Section heading with left neon line + subtitle */
h3.neon-title{position:relative;padding-left:14px;margin:10px 0 12px;display:inline-block}
h3.neon-title::before{content:"";position:absolute;left:0;top:6px;width:6px;height:calc(100% - 12px);border-radius:3px;background:linear-gradient(180deg,var(--accent),var(--accent2));box-shadow:0 6px 18px rgba(0,255,150,0.06)}
h3+ .muted{margin-top:-6px;margin-bottom:12px;display:block;font-size:0.95rem}

/* Better typography for paragraphs and lists */
.card p, .card li, .muted{color:var(--muted);font-size:15px;line-height:1.5}
.card ul, .card ol{margin:8px 0 12px 20px;padding:0}

/* Commands section: new row style with copy button (glass + neon accents) */
.cmd-wrap{display:flex;flex-direction:column;gap:12px}
.commands-list{display:flex;flex-direction:column;gap:10px}
.cmd-row{display:flex;align-items:center;justify-content:space-between;gap:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.03);backdrop-filter: blur(6px);box-shadow:var(--neon-glow);}
.cmd-left{flex:1;min-width:0}
.cmd-code{font-family:Share Tech Mono,monospace;font-size:0.95rem;color:#bfffd6;white-space:pre-wrap;word-break:break-word;display:block}
.cmd-meta{display:block;font-size:0.82rem;color:var(--muted);margin-top:6px}
.cmd-right{flex:0 0 auto;margin-left:12px}
.copy-btn{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--text);padding:8px 12px;border-radius:8px;cursor:pointer;transition:transform .12s,background .12s;font-weight:700}
.copy-btn:hover{transform:translateY(-2px);background:rgba(255,255,255,0.02)}
.copy-btn[disabled]{opacity:0.6;cursor:default}
.copy-success{background:linear-gradient(90deg, rgba(0,255,150,0.12), rgba(0,255,150,0.06));border-color:rgba(0,255,150,0.12);color:var(--accent);}
.copy-failed{background:linear-gradient(90deg, rgba(255,100,100,0.06), transparent);border-color:rgba(255,100,100,0.08);color:#ff9b9b}
.use{color:var(--muted);font-size:0.92rem;margin-left:6px}

/* Buttons */
.btn-row{display:flex;gap:10px;margin-top:10px;align-items:center}
.btn{padding:10px 14px;border-radius:10px;border:1px solid rgba(255,255,255,0.03);background:linear-gradient(90deg,rgba(255,255,255,0.02),transparent);color:var(--text);cursor:pointer;transition:all .18s}
.btn-primary{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#00110a;border:none;box-shadow:0 10px 40px rgba(0,255,140,0.06)}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.04)}

/* Skeleton shimmer */
.skeleton{height:14px;background:linear-gradient(90deg,rgba(255,255,255,0.02),rgba(255,255,255,0.06),rgba(255,255,255,0.02));border-radius:6px;animation:shimmer 1.4s linear infinite}
@keyframes shimmer{0%{background-position:-200px 0}100%{background-position:200px 0}}

/* Title typing fallback */
.title-typing{font-family:Share Tech Mono,monospace;color:var(--accent);font-size:34px;white-space:nowrap;overflow:hidden}

.muted{color:var(--muted)}

.error-card{padding:28px;border-radius:12px;background:linear-gradient(90deg,rgba(255,0,0,0.02),transparent);border:1px solid rgba(255,0,0,0.06);color:#ff7a7a}

/* matrix canvas */
#matrixCanvasWrap{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0.06}
#matrixCanvas{width:100%;height:100%}

/* small responsive helpers */
@media (max-width:880px){ #toolDetailsRoot img{height:180px!important} }

/* Cards grid (for future internal card lists) */
.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:1000px){.cards-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.cards-grid{grid-template-columns:1fr}}

/* Related links inside aside */
#toolDetailsRoot .card .tool-link{display:inline-block;color:var(--accent2);text-decoration:none;margin-bottom:6px}
#toolDetailsRoot .card .tool-link:hover{text-decoration:underline}

@media (max-width:480px){
  .cmd{font-size:0.95rem}
  .btn-row{flex-direction:column}
}

/* Disable global cursor glow on tool-details page to reduce mousemove-heavy effects */
.cursor-glow{display:none !important}

/* Prevent horizontal overflow on small devices */
.td-root{overflow-x:hidden}

/* Footer: ensure tool-details uses the same themed footer as the global site
   Provide a solid glassy background so particles/matrix do not overlap text */
.footer .footer-logo img{display:block;opacity:1;filter:none;width:40px;height:40px}
.footer{
  background: linear-gradient(135deg, rgba(7,18,31,0.98) 0%, rgba(5,9,19,0.94) 100%);
  border-top: 1px solid var(--border-color);
  padding: 60px 20px 30px;
  margin-top: 36px;
  position: relative;
  z-index: 20; /* sit above particle/matrix canvases */
  box-shadow: 0 -12px 40px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.02);
}
.footer .footer-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:3rem;margin-bottom:3rem}
.footer .footer-section{min-width:160px}
.footer .footer-bottom{margin-top:18px;color:var(--text-secondary);font-size:0.95rem}

/* Disable hover color overlay/pseudo-elements originating from global styles
   Keep lift/box-shadow/border-color hover effects intact. */
.intro-card::after, .event-card::after, .platform-card::after, .learn-card::after, .feature-item::after, .tool-card::after, .card::after, .news-card::after {
  background: none !important;
  opacity: 0 !important;
  transform: none !important;
  transition: none !important;
}
.intro-card::before, .event-card::before, .platform-card::before, .learn-card::before, .feature-item::before, .tool-card::before, .news-card::before {
  background: none !important;
  opacity: 0 !important;
  transform: none !important;
  transition: none !important;
}

/* Specific: disable feature-item small radial glow */
.feature-item::after{width:0;height:0}