/* ============================================================
   GhostHub — shared styles (public site)
   Dark, neon-green "gamer" theme. Dark-only by design.
   ============================================================ */

:root{
  --bg:        #0a0d0c;
  --bg-2:      #0c110f;
  --surface:   #111a17;
  --surface-2: #16211d;
  --surface-3: #1b2925;
  --border:    #223029;
  --border-2:  #2c3d36;

  --accent:     #00ff9d;
  --accent-2:   #12e089;
  --accent-dim: rgba(0,255,157,.12);
  --accent-glow: rgba(0,255,157,.35);

  --text:      #e7f1ec;
  --text-mut:  #94a9a1;
  --text-dim:  #61756d;

  --danger:  #ff5b6a;
  --warning: #ffc234;
  --info:    #2b8bff;

  --radius:   14px;
  --radius-sm: 9px;
  --radius-lg: 20px;

  --shadow:   0 18px 50px rgba(0,0,0,.55);
  --shadow-sm: 0 6px 20px rgba(0,0,0,.4);

  --maxw: 1240px;
  --font: "Inter", "Segoe UI", Roboto, system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --font-display: "Space Grotesk", "Inter", "Segoe UI", system-ui, sans-serif;
}

*{ box-sizing:border-box; }
h1,h2,h3,.brand,.admin-brand,.hero h1,.stat-card .val,.login-card h1,.modal-head h3,.a-modal-head h3{ font-family:var(--font-display); }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(0,255,157,.10), transparent 60%),
    radial-gradient(900px 500px at 0% 0%, rgba(43,139,255,.06), transparent 55%),
    var(--bg);
  background-attachment:fixed;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--accent-dim); color:#fff; }

/* scrollbar */
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--bg-2); }
::-webkit-scrollbar-thumb{ background:var(--surface-3); border-radius:20px; border:2px solid var(--bg-2); }
::-webkit-scrollbar-thumb:hover{ background:var(--border-2); }

.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 22px; }
.mut{ color:var(--text-mut); }
.dim{ color:var(--text-dim); }
.accent{ color:var(--accent); }
.nowrap{ white-space:nowrap; }
.hide{ display:none !important; }

/* ---------------- Visual page loading ---------------- */
.page-shell{ transition:opacity .3s ease; }
html.page-loading:not(.page-ready) .page-shell{ opacity:0; visibility:hidden; }
html.page-ready .page-shell{ opacity:1; visibility:visible; }
.page-loader{
  position:fixed; inset:0; z-index:1000; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px; background:
  radial-gradient(600px 340px at 50% 40%, rgba(0,255,157,.12), transparent 65%), var(--bg);
  opacity:1; visibility:visible; transition:opacity .32s ease, visibility .32s ease;
}
html.page-ready .page-loader{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-mark{ width:92px; height:92px; position:relative; display:grid; place-items:center; margin-bottom:8px; }
.loader-mark img{ width:58px; height:58px; filter:drop-shadow(0 0 18px var(--accent-glow)); animation:loaderPulse 1.5s ease-in-out infinite; }
.loader-ring{ position:absolute; inset:0; border-radius:50%; border:2px solid var(--border); border-top-color:var(--accent); border-right-color:var(--accent); animation:loaderSpin .9s linear infinite; }
.page-loader strong{ font-family:var(--font-display); font-size:22px; letter-spacing:.2px; }
.loader-copy{ color:var(--text-dim); font-size:13px; }
@keyframes loaderSpin{ to{ transform:rotate(360deg); } }
@keyframes loaderPulse{ 50%{ transform:scale(.94); opacity:.78; } }

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  border:1px solid var(--border-2); background:var(--surface-2); color:var(--text);
  padding:11px 18px; border-radius:var(--radius-sm); font-weight:600; font-size:14px;
  transition:.15s ease; white-space:nowrap;
}
.btn:hover{ border-color:var(--accent); color:#fff; transform:translateY(-1px); }
.btn svg{ width:17px; height:17px; }
.btn-primary{
  background:linear-gradient(180deg, var(--accent), var(--accent-2));
  color:#052018; border-color:transparent; font-weight:800;
  box-shadow:0 6px 22px rgba(0,255,157,.28);
}
.btn-primary:hover{ color:#031712; filter:brightness(1.05); box-shadow:0 10px 30px rgba(0,255,157,.45); }
.btn-ghost{ background:transparent; }
.btn-block{ width:100%; }
.btn-lg{ padding:15px 26px; font-size:16px; }
.btn-sm{ padding:8px 13px; font-size:13px; }
.btn:disabled{ opacity:.48; cursor:not-allowed; transform:none!important; }

/* ---------------- Header ---------------- */
/* the injected wrapper must be the sticky element (it spans the page),
   otherwise sticky is bounded to the header's own height and scrolls away */
[data-header]{ position:sticky; top:0; z-index:60; display:block; }
.site-header{
  background:rgba(10,13,12,.82); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.header-inner{ display:flex; align-items:center; gap:20px; height:66px; }
.brand{ display:flex; align-items:center; gap:11px; font-weight:800; font-size:20px; letter-spacing:.3px; }
.brand img{ width:34px; height:34px; filter:drop-shadow(0 0 10px var(--accent-glow)); }
.brand b{ color:var(--accent); }
.brand{ flex-shrink:0; }
.header-search{ flex:1; max-width:480px; position:relative; margin:0 auto; }
.header-search input{
  width:100%; height:42px; padding:0 16px 0 42px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
  color:var(--text); font-size:14px; transition:.15s;
}
.header-search input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim); }
.header-search svg{ position:absolute; left:14px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--text-dim); }
.header-nav{ display:flex; align-items:center; gap:6px; flex-shrink:0; }
.header-nav a{ padding:8px 12px; border-radius:8px; color:var(--text-mut); font-weight:600; font-size:14px; transition:.15s; }
.header-nav a:hover{ color:var(--text); background:var(--surface); }
.header-nav a.admin-link{ color:var(--accent); border:1px solid var(--border-2); }
.header-nav a.admin-link:hover{ border-color:var(--accent); background:var(--accent-dim); }

.burger{ display:none; background:var(--surface); border:1px solid var(--border); border-radius:8px; width:42px; height:42px; align-items:center; justify-content:center; }
.burger svg{ width:20px; height:20px; }

/* ---------------- Hero ---------------- */
.hero{ position:relative; padding:64px 0 40px; overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center; }
.hero h1{ font-size:52px; line-height:1.05; margin:0 0 18px; letter-spacing:-1px; }
.hero h1 .grad{
  background:linear-gradient(120deg,#7bffce,#00ff9d 55%,#12e089);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.hero p.lead{ font-size:18px; color:var(--text-mut); max-width:520px; margin:0 0 26px; }
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:30px; margin-top:34px; }
.hero-stats .s b{ display:block; font-size:26px; color:var(--accent); font-weight:800; }
.hero-stats .s span{ font-size:13px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.6px; }

.hero-visual{ position:relative; height:340px; }
.hero-orb{
  position:absolute; inset:0; margin:auto; width:250px; height:250px; border-radius:50%;
  background:radial-gradient(circle at 40% 35%, rgba(0,255,157,.35), rgba(0,255,157,.05) 60%, transparent 70%);
  filter:blur(6px); animation:float 6s ease-in-out infinite;
}
.hero-ghost{ position:absolute; inset:0; margin:auto; width:170px; height:170px; filter:drop-shadow(0 0 30px var(--accent-glow)); animation:float 6s ease-in-out infinite; }
@keyframes float{ 0%,100%{ transform:translateY(-8px);} 50%{ transform:translateY(10px);} }

/* ---------------- Section ---------------- */
.section{ padding:36px 0; }
.section-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; gap:16px; flex-wrap:wrap; }
.section-head h2{ font-size:24px; margin:0; letter-spacing:-.3px; }
.section-head h2 span{ color:var(--text-dim); font-weight:600; font-size:15px; margin-left:8px; }

/* catalog search (in the "All titles" section) */
.catalog-search{ position:relative; width:100%; max-width:340px; }
.catalog-search input{
  width:100%; height:42px; padding:0 16px 0 42px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
  color:var(--text); font-size:14px; font-family:inherit; transition:.15s;
}
.catalog-search input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim); }
.catalog-search svg{ position:absolute; left:14px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--text-dim); }
@media (max-width:720px){ .catalog-search{ max-width:100%; } }

/* filters / chips */
.chips{ display:flex; gap:9px; flex-wrap:wrap; }
.chip{
  padding:8px 15px; border-radius:20px; background:var(--surface); border:1px solid var(--border);
  color:var(--text-mut); font-weight:600; font-size:13px; transition:.15s;
}
.chip:hover{ color:var(--text); border-color:var(--border-2); }
.chip.active{ background:var(--accent-dim); color:var(--accent); border-color:var(--accent); }
.chip[style*="--chip-color"].active{ color:var(--chip-color); border-color:var(--chip-color); background:color-mix(in srgb,var(--chip-color) 12%,transparent); }

/* ---------------- Card grid ---------------- */
.grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(250px,1fr)); gap:18px; }

.card{
  background:linear-gradient(180deg, var(--surface), var(--bg-2));
  border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; transition:.18s ease; position:relative; display:flex; flex-direction:column;
}
.card:hover{ transform:translateY(-4px); border-color:var(--border-2); box-shadow:var(--shadow); }
.card:hover .card-banner::after{ opacity:.9; }
.card-banner{
  height:120px; position:relative; overflow:hidden;
  background:linear-gradient(135deg,#16211d,#0c110f);
  display:flex; align-items:center; justify-content:center;
}
.card-banner::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%, var(--bg-2)); opacity:.7; transition:.18s; }
.card-banner img{ width:100%; height:100%; object-fit:cover; }
.card-banner img.banner-default{ width:70px; height:70px; object-fit:contain; opacity:.86; filter:drop-shadow(0 0 18px var(--product-accent)); }
.card-banner .banner-glow{ position:absolute; width:180px; height:180px; border-radius:50%; filter:blur(40px); opacity:.5; }
.card-status{ position:absolute; top:10px; right:10px; z-index:3; }
.card-status .badge{ background:rgba(10,13,12,.72); backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,.06); }

.card-body{ padding:16px; display:flex; flex-direction:column; gap:9px; flex:1; }
.card-head{ display:flex; align-items:center; gap:11px; }
.card-icon{
  width:46px; height:46px; border-radius:12px; flex-shrink:0;
  border:1px solid var(--border-2); background:var(--surface-2); object-fit:cover;
}
.card-head-text{ flex:1; min-width:0; }
.card-title{ display:flex; align-items:center; gap:8px; }
.card-title h3{ margin:0; font-size:16px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-cat{ font-size:12px; color:var(--text-dim); }
.card-desc{ font-size:13px; color:var(--text-mut); flex:1; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card-meta{ display:flex; align-items:center; gap:14px; font-size:12.5px; color:var(--text-dim); }
.card-meta .m{ display:inline-flex; align-items:center; gap:5px; line-height:1; }
.card-meta .m svg{ width:13px; height:13px; flex-shrink:0; }
.card-meta .rating{ color:var(--warning); font-weight:700; }
.card-meta .ver{ color:var(--text-dim); font-weight:600; }
.card-foot{ display:flex; gap:8px; align-items:center; margin-top:4px; }
.card-foot .btn{ flex:1; }

/* status badge */
.badge{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:3px 8px; border-radius:20px; letter-spacing:.3px; text-transform:uppercase; }
.badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 8px currentColor; }
.badge.working{ color:var(--accent); background:var(--accent-dim); }
.badge.updating{ color:var(--warning); background:rgba(255,194,52,.12); }
.badge.down{ color:var(--danger); background:rgba(255,91,106,.12); }
.badge.featured{ color:var(--info); background:rgba(43,139,255,.12); text-transform:none; }
.badge.featured::before{ display:none; }

.pill{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:8px; background:var(--surface-2); border:1px solid var(--border); font-size:12px; color:var(--text-mut); font-weight:600; }

/* ---------------- Modal (Install) ---------------- */
.modal-overlay{
  position:fixed; inset:0; z-index:100; background:rgba(4,7,6,.72); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; pointer-events:none; transition:.2s;
}
.modal-overlay.open{ opacity:1; pointer-events:auto; }
.modal{
  width:100%; max-width:560px; max-height:90vh; overflow:hidden; display:flex; flex-direction:column;
  background:linear-gradient(180deg,var(--surface),var(--bg-2)); border:1px solid var(--border-2);
  border-radius:var(--radius-lg); box-shadow:var(--shadow); transform:translateY(14px) scale(.98); transition:.2s;
}
.modal-overlay.open .modal{ transform:none; }
.modal-head{ display:flex; align-items:center; gap:14px; padding:20px 22px; border-bottom:1px solid var(--border); }
.modal-head img{ width:48px; height:48px; border-radius:12px; border:1px solid var(--border-2); }
.modal-head .mh-text{ flex:1; min-width:0; }
.modal-head h3{ margin:0; font-size:18px; }
.modal-head p{ margin:2px 0 0; font-size:13px; color:var(--text-mut); }
.modal-close{ background:var(--surface-2); border:1px solid var(--border); border-radius:9px; width:36px; height:36px; color:var(--text-mut); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.modal-close:hover{ color:#fff; border-color:var(--danger); }

.tabs{ display:flex; gap:4px; padding:12px 22px 0; border-bottom:1px solid var(--border); }
.tab{ padding:10px 14px; border:none; background:none; color:var(--text-mut); font-weight:700; font-size:13px; border-bottom:2px solid transparent; transition:.15s; }
.tab:hover{ color:var(--text); }
.tab.active{ color:var(--accent); border-bottom-color:var(--accent); }
.tab-panels{ padding:22px; overflow-y:auto; }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; animation:fadein .2s ease; }
@keyframes fadein{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }

.dl-btn-wrap{ text-align:center; margin-bottom:18px; }
.password-box{
  background:var(--surface-2); border:1px dashed var(--border-2); border-radius:var(--radius-sm);
  padding:14px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:6px;
}
.password-box .pw-label{ font-size:12px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px; }
.password-box code{ font-size:18px; color:var(--accent); font-weight:800; letter-spacing:1px; font-family:"Consolas",monospace; }
.copy-btn{ background:var(--surface-3); border:1px solid var(--border-2); border-radius:8px; padding:9px 13px; color:var(--text); font-weight:700; font-size:13px; display:flex; align-items:center; gap:6px; }
.copy-btn:hover{ border-color:var(--accent); color:var(--accent); }
.copy-btn.copied{ color:var(--accent); border-color:var(--accent); }

.instructions-list{ margin:0; padding:0; list-style:none; counter-reset:step; }
.instructions-list li{ position:relative; padding:0 0 14px 40px; color:var(--text-mut); font-size:14px; }
.instructions-list li::before{
  counter-increment:step; content:counter(step);
  position:absolute; left:0; top:-2px; width:26px; height:26px; border-radius:8px;
  background:var(--accent-dim); color:var(--accent); font-weight:800; font-size:13px;
  display:flex; align-items:center; justify-content:center;
}
.video-frame{ position:relative; padding-top:56.25%; border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--border); background:#000; }
.video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

.faq-item{ border:1px solid var(--border); border-radius:var(--radius-sm); margin-bottom:10px; overflow:hidden; background:var(--surface-2); }
.faq-q{ width:100%; text-align:left; background:none; border:none; color:var(--text); font-weight:700; font-size:14px; padding:14px 16px; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.faq-q svg{ width:18px; height:18px; color:var(--text-dim); transition:.2s; flex-shrink:0; }
.faq-item.open .faq-q svg{ transform:rotate(180deg); color:var(--accent); }
.faq-a{ padding:0 16px; max-height:0; overflow:hidden; color:var(--text-mut); font-size:14px; transition:.25s; }
.faq-item.open .faq-a{ padding:0 16px 14px; max-height:300px; }

.modal-alert{ font-size:12px; color:var(--text-dim); text-align:center; margin-top:14px; }
.modal-alert b{ color:var(--warning); }

.download-progress{ display:grid; gap:14px; margin-bottom:16px; }
.download-status{
  display:flex; align-items:flex-start; gap:14px; padding:16px; border-radius:var(--radius-sm);
  border:1px solid rgba(0,255,157,.24); background:linear-gradient(135deg,rgba(0,255,157,.1),rgba(0,255,157,.025));
}
.download-status-icon{
  width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center; border-radius:50%;
  background:var(--accent-dim); border:1px solid rgba(0,255,157,.3); color:var(--accent);
}
.download-status.starting .download-status-icon span{
  width:19px; height:19px; border:2px solid rgba(0,255,157,.25); border-top-color:var(--accent); border-radius:50%;
  animation:downloadSpin .75s linear infinite;
}
.download-status.complete .download-status-icon::before{ content:"✓"; font-size:22px; font-weight:900; }
.download-status.blocked{ border-color:rgba(255,176,32,.35); background:linear-gradient(135deg,rgba(255,176,32,.11),rgba(255,176,32,.025)); }
.download-status.blocked .download-status-icon{ color:var(--warning); border-color:rgba(255,176,32,.35); background:rgba(255,176,32,.1); }
.download-status.blocked .download-status-icon::before{ content:"!"; font-size:22px; font-weight:900; }
.download-status-copy{ flex:1; min-width:0; }
.download-status-line{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.download-status h4{ margin:1px 0 5px; font-size:16px; color:var(--text); }
.download-status p{ margin:0; font-size:13px; line-height:1.55; color:var(--text-mut); }
.download-status p b{ color:var(--text); }
.download-countdown{
  min-width:48px; padding:5px 9px; border-radius:999px; background:var(--surface-3); border:1px solid var(--border-2);
  color:var(--accent); font-size:12px; text-align:center; white-space:nowrap;
}
.direct-download{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 13px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface-2); }
.direct-download>span{ color:var(--text-dim); font-size:13px; font-weight:600; }
.direct-download .btn{ flex-shrink:0; }
.direct-download .btn.attention{ border-color:var(--accent); color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim); }
@keyframes downloadSpin{ to{ transform:rotate(360deg); } }

@media(max-width:520px){
  .download-status{ padding:14px; }
  .download-status-icon{ width:36px; height:36px; flex-basis:36px; }
  .download-status-line{ align-items:flex-start; }
  .direct-download{ align-items:stretch; flex-direction:column; }
  .direct-download .btn{ justify-content:center; }
}

/* ---------------- Footer ---------------- */
.site-footer{ border-top:1px solid var(--border); margin-top:40px; padding:36px 0; color:var(--text-dim); }
.footer-inner{ display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; align-items:center; }
.footer-inner .brand{ font-size:17px; }
.footer-links{ display:flex; gap:20px; flex-wrap:wrap; }
.footer-links a:hover{ color:var(--accent); }
.footer-note{ font-size:12px; margin-top:16px; color:var(--text-dim); max-width:560px; }

/* ---------------- Animations ---------------- */
@keyframes cardEnter{ from{ opacity:0; transform:translateY(16px) scale(.98); } to{ opacity:1; transform:none; } }
.card-enter{ animation:cardEnter .5s cubic-bezier(.2,.7,.2,1) backwards; }

@keyframes fadeUp{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
.hero-copy > *{ animation:fadeUp .6s cubic-bezier(.2,.7,.2,1) backwards; }
.hero-copy > *:nth-child(1){ animation-delay:.03s; }
.hero-copy > *:nth-child(2){ animation-delay:.10s; }
.hero-copy > *:nth-child(3){ animation-delay:.17s; }
.hero-copy > *:nth-child(4){ animation-delay:.24s; }
.hero-visual{ animation:fadeUp .7s cubic-bezier(.2,.7,.2,1) .12s backwards; }

/* button press feedback */
.btn:active{ transform:translateY(0) scale(.97); }
.chip:active{ transform:scale(.96); }
.icon-btn:active{ transform:scale(.92); }

/* scroll reveal (JS adds .reveal, so no-JS keeps content visible) */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-delay:0 !important; transition-duration:.05ms !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .hero-ghost, .hero-orb{ animation:none !important; }
}

/* ---------------- Show more ---------------- */
.show-more-wrap{ display:flex; justify-content:center; margin-top:26px; }
.show-more-wrap .btn{ min-width:220px; }
.show-more-wrap .count{ color:var(--text-dim); font-weight:600; margin-left:4px; }

/* ---------------- Empty state ---------------- */
.empty{ text-align:center; padding:60px 20px; color:var(--text-dim); }
.empty svg{ width:60px; height:60px; opacity:.4; margin-bottom:14px; }

/* ============================================================
   Product page
   ============================================================ */
.breadcrumb{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-dim); padding:20px 0 0; }
.breadcrumb a:hover{ color:var(--accent); }

.product-hero{ display:grid; grid-template-columns:1fr; gap:0; margin-top:16px; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border); }
.product-banner{ height:260px; position:relative; background:linear-gradient(135deg,#16211d,#0c110f); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.product-banner img{ width:100%; height:100%; object-fit:cover; }
.product-banner .banner-glow{ position:absolute; width:340px; height:340px; border-radius:50%; filter:blur(60px); opacity:.4; }
.product-headbar{ display:flex; gap:20px; align-items:flex-end; padding:22px; background:var(--surface); flex-wrap:wrap; }
.product-headbar .p-icon{ width:96px; height:96px; border-radius:20px; border:1px solid var(--border-2); margin-top:-70px; box-shadow:var(--shadow); background:var(--surface-2); position:relative; z-index:2; }
.product-headbar .p-title h1{ margin:0 0 6px; font-size:30px; letter-spacing:-.5px; }
.product-headbar .p-title .p-sub{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; color:var(--text-mut); font-size:14px; }
.product-headbar .p-actions{ margin-left:auto; display:flex; gap:10px; align-items:center; }

.product-body{ display:grid; grid-template-columns:1fr 320px; gap:24px; margin-top:24px; align-items:start; }
.panel{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:22px; }
.panel h3{ margin:0 0 14px; font-size:17px; }
.panel p{ color:var(--text-mut); }
.panel + .panel{ margin-top:20px; }

.spec-list{ display:grid; grid-template-columns:1fr; gap:0; }
.spec-list .row{ display:flex; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px solid var(--border); font-size:14px; }
.spec-list .row:last-child{ border-bottom:none; }
.spec-list .row .k{ color:var(--text-dim); }
.spec-list .row .v{ color:var(--text); font-weight:600; text-align:right; }

.stars{ display:inline-flex; gap:2px; color:var(--warning); }
.stars svg{ width:16px; height:16px; }
.stars .off{ color:var(--border-2); }

.related .grid{ grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
.product-banner-default{ width:130px!important; height:130px!important; object-fit:contain!important; opacity:.9; filter:drop-shadow(0 0 24px var(--product-accent)); }
.section-empty{ padding:28px; border:1px dashed var(--border); border-radius:var(--radius); color:var(--text-dim); text-align:center; }

/* ---------------- Setup ---------------- */
.setup-wrap{ min-height:100vh; display:grid; place-items:center; padding:30px 20px; }
.setup-card{ width:100%; max-width:780px; padding:30px; border:1px solid var(--border-2); border-radius:var(--radius-lg); background:linear-gradient(180deg,var(--surface),var(--bg-2)); box-shadow:var(--shadow); }
.setup-brand{ display:flex; align-items:center; gap:16px; margin-bottom:24px; }
.setup-brand img{ width:58px; height:58px; filter:drop-shadow(0 0 16px var(--accent-glow)); }
.setup-brand h1{ margin:0; font-size:28px; }.setup-brand h1 b{ color:var(--accent); }
.setup-brand p{ margin:2px 0 0; color:var(--text-dim); }
.requirements{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:22px; }
.req-item{ display:flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid var(--border); border-radius:10px; color:var(--text-mut); font-size:13px; }
.req-item b{ display:grid; place-items:center; width:20px; height:20px; border-radius:50%; }
.req-item.ok b{ background:var(--accent-dim); color:var(--accent); }.req-item.bad b{ background:rgba(255,91,106,.12); color:var(--danger); }
.setup-form .field span{ font-size:13px; font-weight:700; color:var(--text-mut); }
.setup-note{ color:var(--text-dim); font-size:13px; margin:18px 0; }
.form-alert{ padding:12px 14px; border-radius:10px; margin-bottom:16px; font-size:14px; }
.form-alert.error{ color:#ffb5bd; border:1px solid rgba(255,91,106,.45); background:rgba(255,91,106,.1); }
.form-alert.success{ color:var(--accent); border:1px solid rgba(0,255,157,.35); background:var(--accent-dim); }
.setup-done{ text-align:center; padding:28px 0 8px; }.setup-done>span{ display:inline-grid; place-items:center; width:58px; height:58px; border-radius:50%; background:var(--accent-dim); color:var(--accent); font-size:30px; }
.setup-done h2{ margin-bottom:6px; }.setup-done p{ color:var(--text-mut); }.setup-done .hero-actions{ justify-content:center; margin-top:22px; }
@media(max-width:720px){ .requirements{ grid-template-columns:1fr 1fr; }.setup-card{ padding:22px; } }

/* ---------------- Responsive ---------------- */
@media (max-width:960px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ display:none; }
  .hero h1{ font-size:40px; }
  .product-body{ grid-template-columns:1fr; }
}
@media (max-width:720px){
  .header-search{ display:none; }
  .header-nav{ display:none; }
  .burger{ display:flex; }
  .hero{ padding:40px 0 24px; }
  .hero h1{ font-size:32px; }
  .hero-stats{ gap:20px; }
  .section-head h2{ font-size:20px; }
  .product-headbar .p-actions{ margin-left:0; width:100%; }
  .product-headbar .p-actions .btn{ flex:1; }
}

/* mobile nav drawer */
.mobile-nav{ position:fixed; inset:0; z-index:60; background:rgba(4,7,6,.8); backdrop-filter:blur(8px); opacity:0; pointer-events:none; transition:.2s; }
.mobile-nav.open{ opacity:1; pointer-events:auto; }
.mobile-nav .drawer{ position:absolute; right:0; top:0; height:100%; width:80%; max-width:320px; background:var(--surface); border-left:1px solid var(--border); padding:22px; transform:translateX(20px); transition:.2s; display:flex; flex-direction:column; gap:6px; }
.mobile-nav.open .drawer{ transform:none; }
.mobile-nav .drawer input{ width:100%; height:44px; padding:0 14px; background:var(--bg-2); border:1px solid var(--border); border-radius:10px; color:var(--text); margin-bottom:12px; }
.mobile-nav .drawer a{ padding:13px 12px; border-radius:10px; color:var(--text-mut); font-weight:700; }
.mobile-nav .drawer a:hover{ background:var(--surface-2); color:var(--text); }