/* Hazelink interactive product demo — mirrors MobileTheme / DesktopTheme tokens */
#hz-demo{
  position:fixed;inset:0;z-index:12000;
  display:none;flex-direction:column;
  background:#0A0A0B;
  color:#F5F5F5;font-family:Satoshi,'General Sans',system-ui,sans-serif;
}
#hz-demo.open{display:flex;}
body.hz-demo-open{overflow:hidden!important;}

.hzd-top{
  flex:0 0 auto;height:52px;display:flex;align-items:center;gap:10px;
  padding:0 clamp(12px,3vw,28px);
  border-bottom:1px solid rgba(138,138,142,.22);
  background:#111214;
}
.hzd-brand{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-right:auto;}
.hzd-mark{width:8px;height:8px;border-radius:50%;background:#D4A94D;}
.hzd-badge{
  font-size:10px;font-weight:600;letter-spacing:.04em;
  color:#7D818A;border:1px solid rgba(138,138,142,.28);
  padding:3px 8px;border-radius:6px;
}
.hzd-toggle{
  display:inline-flex;padding:2px;border-radius:10px;border:1px solid rgba(138,138,142,.22);background:#17181B;
}
.hzd-toggle button{
  appearance:none;border:0;background:transparent;color:#7D818A;cursor:pointer;
  font:600 11px/1 Satoshi,sans-serif;letter-spacing:.02em;
  padding:7px 12px;border-radius:8px;transition:.15s;
}
.hzd-toggle button.on{background:rgba(212,169,77,.16);color:#E7C97A;}
.hzd-exit{
  appearance:none;border:1px solid rgba(138,138,142,.22);background:transparent;color:#B8B8B8;
  font:600 11px/1 Satoshi,sans-serif;padding:8px 12px;border-radius:8px;cursor:pointer;
}
.hzd-exit:hover{border-color:rgba(212,169,77,.35);color:#F5F5F5;}
.hzd-hint{font-size:11px;color:#7D818A;}
@media(max-width:720px){.hzd-hint{display:none;}}

.hzd-stage{
  flex:1;min-height:0;display:flex;align-items:center;justify-content:center;
  padding:clamp(12px,2.5vw,28px);position:relative;background:#0A0A0B;
}

/* Phone frame — MobileTheme */
.hzd-phone{
  width:min(390px,100%);height:min(780px,calc(100% - 8px));
  background:#0A0A0B;border:1px solid rgba(138,138,142,.22);border-radius:28px;
  box-shadow:0 24px 64px rgba(0,0,0,.5);
  overflow:hidden;display:none;flex-direction:column;position:relative;
}
.hzd-phone.show{display:flex;}
.hzd-phone-notch{
  height:26px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  color:#7D818A;font-size:11px;font-weight:600;
}
.hzd-phone-body{flex:1;min-height:0;overflow:auto;padding:4px 16px 12px;-webkit-overflow-scrolling:touch;}
.hzd-phone-body.with-bar{padding-bottom:8px;}
.hzd-phone-bar{flex:0 0 auto;background:#0A0A0B;}

/* My PCs bottom bar — no gold outline on profile / feedback */
.hzd-mypcs-bar{padding:10px 16px 14px;display:flex;flex-direction:column;gap:12px;}
.hzd-pill-feedback{
  appearance:none;width:100%;border:0;border-radius:999px;cursor:pointer;
  background:#111214;color:#F5F5F5;
  font:600 15px/1 Satoshi,sans-serif;letter-spacing:-.02em;
  padding:14px 16px;display:flex;align-items:center;justify-content:center;gap:10px;
}
.hzd-pill-feedback .ico{font-size:14px;opacity:.7;}
.hzd-mypcs-row{display:flex;align-items:center;gap:12px;}
.hzd-circle{
  appearance:none;width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;
  background:#111214;color:#F5F5F5;font:700 16px/1 Satoshi,sans-serif;flex-shrink:0;
}
.hzd-pair{
  appearance:none;flex:1;border:0;border-radius:999px;cursor:pointer;
  background:linear-gradient(90deg,#E7C97A,#D4A94D);color:#141416;
  font:800 15px/1 Satoshi,sans-serif;letter-spacing:-.03em;
  padding:15px 12px;display:flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:0 4px 16px rgba(212,169,77,.35);
}
.hzd-pair span{font-size:20px;font-weight:700;line-height:1;}

/* Desktop window — DesktopTheme */
.hzd-desk{
  width:min(1100px,100%);height:min(680px,calc(100% - 8px));
  background:#111214;border:1px solid rgba(138,138,142,.22);border-radius:12px;
  box-shadow:0 32px 80px rgba(0,0,0,.5);overflow:hidden;display:none;
}
.hzd-desk.show{display:grid;grid-template-columns:200px 1fr;}
.hzd-side{
  background:#121214;border-right:1px solid rgba(138,138,142,.28);
  padding:14px 10px;display:flex;flex-direction:column;gap:2px;
}
.hzd-side .logo{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:8px 10px 14px;color:#E7C97A;}
.hzd-side-sec{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7D818A;padding:12px 10px 6px;}
.hzd-side button{
  appearance:none;border:1px solid transparent;background:transparent;color:#8A8A8E;cursor:pointer;text-align:left;
  font:500 13px/1 Satoshi,sans-serif;padding:10px 12px;border-radius:10px;transition:.15s;
}
.hzd-side button.on{background:rgba(212,169,77,.16);color:#E7C97A;border-color:rgba(212,169,77,.32);}
.hzd-side .foot{margin-top:auto;padding:10px;font-size:10px;color:#7D818A;}
.hzd-main{display:flex;flex-direction:column;min-width:0;min-height:0;background:#0A0A0B;}
.hzd-titlebar{
  height:44px;display:flex;align-items:center;gap:10px;padding:0 16px;
  border-bottom:1px solid rgba(138,138,142,.22);font-size:13px;font-weight:600;color:#F5F5F5;
}
.hzd-titlebar .dot{width:8px;height:8px;border-radius:50%;background:#3DBA6E;}
.hzd-titlebar .dot.off{background:#E05252;}
.hzd-local{margin-left:auto;font-size:10px;font-weight:500;color:#7D818A;letter-spacing:.04em;}
.hzd-content{flex:1;min-height:0;overflow:auto;padding:12px;}

/* Shared — match MobileTheme radii / gold borders */
.hzd-h1{font-size:26px;font-weight:700;letter-spacing:-.4px;margin:0 0 12px;color:#F5F5F5;}
.hzd-h1.desk{font-size:18px;font-weight:600;letter-spacing:-.2px;margin-bottom:4px;}
.hzd-sub{font-size:13px;color:#7D818A;margin:0 0 16px;line-height:1.35;}
.hzd-sub.tight{margin-bottom:12px;}
.hzd-hint-inline{font-size:13px;color:#7D818A;margin:10px 0 0;line-height:1.35;}

.hzd-hero-card{
  background:#1C1E22;border-radius:20px;padding:18px;margin-bottom:12px;
  border:1px solid rgba(212,169,77,.22);
}
.hzd-hero-card.offline{border-color:rgba(125,129,138,.18);opacity:.92;}
.hzd-mini-card{
  background:#1C1E22;border-radius:16px;padding:14px 16px;margin-bottom:12px;
  border:1px solid rgba(212,169,77,.12);cursor:pointer;
}
.hzd-card{
  background:#1C1E22;border:1px solid rgba(212,169,77,.12);border-radius:16px;
  padding:14px 16px;margin-bottom:12px;
}
.hzd-card.quiet{border-color:rgba(138,138,142,.22);}
.hzd-panel{
  background:#1C1E22;border:1px solid rgba(138,138,142,.22);border-radius:20px;
  padding:14px 16px;margin-bottom:12px;
  box-shadow:0 4px 20px rgba(0,0,0,.3);
}
.hzd-panel.flush-r{border-radius:20px 0 0 20px;border-right:0;}
.hzd-panel-h{font-size:13px;font-weight:600;color:#F5F5F5;margin:0 0 10px;letter-spacing:-.2px;}

.hzd-row{display:flex;align-items:center;gap:12px;}
.hzd-row .meta{flex:1;min-width:0;}
.hzd-row .name{font-weight:600;font-size:15px;letter-spacing:-.2px;}
.hzd-row .desc{font-size:12px;color:#7D818A;margin-top:2px;}
.hzd-thumb{
  width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:rgba(125,129,138,.12);font-size:20px;flex-shrink:0;
}
.hzd-thumb.on{background:rgba(212,169,77,.18);}
.hzd-thumb.sm{width:40px;height:40px;font-size:16px;border-radius:10px;}
.hzd-avatar{
  width:48px;height:48px;border-radius:50%;background:#111214;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:16px;flex-shrink:0;
}

.hzd-status{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;margin-top:4px;}
.hzd-status.on{color:#3DBA6E;}
.hzd-status.off{color:#E05252;}
.hzd-status i{width:8px;height:8px;border-radius:50%;background:currentColor;}
.hzd-push-head .hzd-status{margin:0 0 0 auto;font-size:12px;}

.hzd-pill{
  font-size:11px;font-weight:700;color:#D4A94D;background:rgba(212,169,77,.15);
  padding:4px 8px;border-radius:8px;
}
.hzd-pill.soft{color:#E7C97A;background:rgba(212,169,77,.12);font-weight:600;}

.hzd-section-lbl{
  display:flex;align-items:center;justify-content:space-between;
  font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#7D818A;
  margin:18px 0 8px;
}
.hzd-section-lbl span{font-size:14px;opacity:.6;}

.hzd-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.hzd-stat{text-align:center;}
.hzd-stat b{display:block;color:#D4A94D;font-size:18px;letter-spacing:-.02em;}
.hzd-stat span{font-size:11px;color:#7D818A;}

.hzd-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px;}
.hzd-actions.sticky{margin-top:16px;}
.hzd-btn{
  appearance:none;border:1px solid rgba(138,138,142,.22);background:transparent;color:#F5F5F5;
  border-radius:14px;padding:14px 12px;font:700 13px/1 Satoshi,sans-serif;cursor:pointer;
}
.hzd-btn:hover{border-color:rgba(212,169,77,.4);}
.hzd-btn.primary{background:#D4A94D;color:#141416;border-color:transparent;}
.hzd-btn.ghost{background:transparent;}
.hzd-btn.block{width:100%;display:block;margin-top:16px;grid-column:1/-1;}
.hzd-btn:disabled{opacity:.55;cursor:default;}

.hzd-feed{display:grid;gap:8px;}
.hzd-feed-item{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:#CFCFD2;}
.hzd-feed-item span{color:#7D818A;font-size:11px;white-space:nowrap;}

.hzd-code{
  font-family:ui-monospace,Consolas,monospace;font-size:28px;letter-spacing:.28em;color:#E7C97A;text-align:center;
  padding:18px 8px;border:1px dashed rgba(212,169,77,.35);border-radius:12px;margin:8px 0 12px;
}
.hzd-code-entry{
  display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:8px 0 18px;
}
.hzd-code-entry span{
  height:48px;display:flex;align-items:center;justify-content:center;
  background:#17181B;border:1px solid rgba(138,138,142,.22);border-radius:12px;
  font:700 20px/1 ui-monospace,monospace;color:#E7C97A;
}
.hzd-numpad{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:280px;margin:0 auto 16px;
}
.hzd-numpad button{
  appearance:none;border:1px solid rgba(138,138,142,.22);background:#17181B;color:#F5F5F5;
  border-radius:14px;padding:16px;font:600 18px/1 Satoshi,sans-serif;cursor:pointer;
}

.hzd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;}
.hzd-rail{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;}
.hzd-rail .hzd-game{flex:0 0 96px;}
.hzd-game{
  appearance:none;background:#17181B;border:1px solid rgba(138,138,142,.16);border-radius:14px;
  padding:10px;cursor:pointer;text-align:left;color:inherit;width:100%;
}
.hzd-game:hover{border-color:rgba(212,169,77,.35);}
.hzd-game .art{
  height:96px;border-radius:10px;margin-bottom:8px;
  background:#1C1E22 center/cover no-repeat;
}
.hzd-game.compact .art{height:72px;}
.hzd-game .gname{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.hzd-seg{
  display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:3px;margin-bottom:14px;
  background:#17181B;border:1px solid rgba(138,138,142,.22);border-radius:12px;
}
.hzd-seg button{
  appearance:none;border:0;background:transparent;color:#7D818A;cursor:pointer;
  font:600 13px/1 Satoshi,sans-serif;padding:10px;border-radius:9px;
}
.hzd-seg button.on{background:rgba(212,169,77,.16);color:#E7C97A;}

.hzd-app-list{display:grid;gap:6px;}
.hzd-app-row{
  appearance:none;width:100%;border:1px solid rgba(138,138,142,.16);background:#1C1E22;color:inherit;
  border-radius:14px;padding:12px 14px;display:flex;align-items:center;gap:12px;cursor:pointer;text-align:left;
}
.hzd-app-ico{
  width:36px;height:36px;border-radius:10px;background:rgba(212,169,77,.15);color:#D4A94D;
  display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;
}
.hzd-app-row .name{flex:1;font-weight:600;font-size:14px;}
.hzd-app-row .muted,.muted{color:#7D818A;font-size:12px;}

.hzd-list-row{
  appearance:none;width:100%;display:flex;justify-content:space-between;align-items:center;
  background:#1C1E22;border:1px solid rgba(212,169,77,.12);border-radius:14px;
  padding:14px 16px;margin-bottom:8px;color:#F5F5F5;font:600 14px/1 Satoshi,sans-serif;cursor:pointer;
}

.hzd-push-head{
  display:flex;align-items:center;gap:10px;margin-bottom:14px;
  font-size:15px;font-weight:600;
}
.hzd-back{
  appearance:none;width:36px;height:36px;border-radius:10px;border:1px solid rgba(138,138,142,.22);
  background:#17181B;color:#F5F5F5;cursor:pointer;font-size:16px;
}

.hzd-progress{height:6px;background:rgba(255,255,255,.06);border-radius:99px;overflow:hidden;margin-top:8px;}
.hzd-progress > i{display:block;height:100%;width:0;background:#D4A94D;border-radius:99px;transition:width .4s;}

.hzd-toast{
  position:absolute;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);
  background:#1C1E22;border:1px solid rgba(212,169,77,.35);color:#F5F5F5;
  padding:12px 16px;border-radius:12px;font-size:13px;opacity:0;pointer-events:none;
  transition:.25s;z-index:5;max-width:min(420px,90%);text-align:center;
  box-shadow:0 16px 40px rgba(0,0,0,.4);
}
.hzd-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

.hzd-desk-home{display:grid;grid-template-columns:1.7fr .9fr;gap:14px;min-height:100%;}
.hzd-desk-left,.hzd-desk-right{min-width:0;}
@media(max-width:900px){
  .hzd-desk.show{grid-template-columns:1fr;}
  .hzd-side{display:none;}
  .hzd-desk-home{grid-template-columns:1fr;}
  .hzd-panel.flush-r{border-radius:20px;border-right:1px solid rgba(138,138,142,.22);}
  .hzd-desk{height:min(740px,calc(100% - 8px));}
}

.hzd-session{
  background:#111214;border:1px solid rgba(212,169,77,.22);border-radius:20px;padding:18px;margin-bottom:14px;
}
.hzd-session .lbl{font-size:11px;color:#E7C97A;letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px;font-weight:700;}
.hzd-session .title{font-size:22px;font-weight:700;letter-spacing:-.02em;}
.hzd-session .meta{margin-top:8px;font-size:12px;color:#B8B8B8;}

/* Nav CTA */
.n-demo{
  background:transparent;color:#B8B8B8;
  font-family:'General Sans',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.04em;line-height:1;
  height:30px;padding:0 12px;border:1px solid rgba(255,255,255,.08);border-radius:8px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;
  transition:background .18s,color .18s,border-color .18s;white-space:nowrap;
}
.n-demo:hover{border-color:rgba(212,169,77,.3);color:#F5F5F5;}
.n-demo.is-open{background:rgba(212,169,77,.12);color:#E7C97A;border-color:rgba(212,169,77,.3);}
@media(max-width:980px){.n-demo{display:none!important;}}