.cl-hero { padding:48px 28px 24px; max-width:840px; margin:0 auto; position:relative; z-index:3; }
.cl-hero-q { font-family:'Fraunces',serif; font-size:32px; font-weight:400; color:var(--text-0); letter-spacing:-.4px; line-height:1.25; margin:14px 0 24px; }

.cl-modes { display:flex; gap:6px; margin-bottom:14px; }
.cl-mode { padding:8px 14px; font-size:12px; background:rgba(255,255,255,0.02); border:0.5px solid var(--border-1); color:var(--text-2); border-radius:var(--r-sm); cursor:pointer; font-family:inherit; }
.cl-mode.active { background:var(--gold-dim); border-color:var(--gold-border); color:var(--gold); }

.cl-input-wrap { background:var(--bg-2); border:0.5px solid var(--border-2); border-radius:var(--r-lg); padding:14px 16px; transition:border-color .2s; }
.cl-input-wrap:focus-within { border-color:var(--gold-strong); }
.cl-input { width:100%; background:transparent; border:none; outline:none; font-family:inherit; font-size:14px; color:var(--text-0); resize:none; line-height:1.55; min-height:60px; }
.cl-input::placeholder { color:var(--text-3); }
.cl-input-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:8px; }

.cl-result { padding:24px 28px 32px; max-width:1080px; margin:0 auto; position:relative; z-index:3; }
.cl-vrd-hero { text-align:center; margin-bottom:36px; }
.cl-vrd-meta { font-family:'Fraunces',serif; font-size:13px; color:var(--gold-dark); font-style:italic; margin:8px 0 22px; }
.cl-vrd-meta b { color:var(--gold); font-style:normal; font-weight:400; font-family:'JetBrains Mono',monospace; font-size:11px; padding:0 4px; }

.cl-ncm-wrap { position:relative; display:inline-block; padding:0 40px; }
.cl-ncm-wrap::before,.cl-ncm-wrap::after { content:''; position:absolute; top:50%; width:30px; height:0.5px; background:var(--gold-strong); }
.cl-ncm-wrap::before { left:0; } .cl-ncm-wrap::after { right:0; }
.cl-ncm { font-family:'JetBrains Mono',monospace; font-size:72px; color:var(--gold); font-weight:300; letter-spacing:2px; line-height:1; text-shadow:0 0 40px rgba(201,170,114,0.3); animation:revealNcm 1.2s ease-out; }
.cl-ncm .dot { color:var(--gold-dark); opacity:.5; }
.cl-desc { margin:18px auto 0; font-size:14px; color:var(--text-0); line-height:1.55; max-width:520px; }
.cl-just { font-family:'Fraunces',serif; font-style:italic; color:var(--text-1); font-size:12px; border-left:2px solid var(--gold-strong); padding-left:10px; margin-top:10px; line-height:1.5; }
.cl-meta-row { display:flex; justify-content:center; gap:24px; margin-top:18px; font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--text-2); letter-spacing:.5px; text-transform:uppercase; flex-wrap:wrap; }
.cl-meta-row span { display:flex; align-items:center; gap:6px; }
.cl-meta-row b { color:var(--green); font-weight:400; }

.cl-tribs { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:32px; }
.cl-trib { position:relative; background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01)); border:0.5px solid var(--border-1); border-radius:var(--r-lg); padding:16px 14px; overflow:hidden; transition:all .3s; }
.cl-trib:hover { border-color:var(--gold-strong); transform:translateY(-2px); }
.cl-trib::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--gold-strong),transparent); opacity:0; transition:opacity .3s; }
.cl-trib:hover::before { opacity:1; }
.cl-trib-lbl { font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--text-2); text-transform:uppercase; letter-spacing:1px; margin-bottom:10px; }
.cl-trib-val { font-family:'Fraunces',serif; font-size:32px; color:var(--text-0); font-weight:300; line-height:1; letter-spacing:-1px; }
.cl-trib-val.gold { color:var(--gold); }
.cl-trib-val.warn { color:var(--amber); font-size:22px; }
.cl-trib-bar { height:2px; background:var(--border-0); border-radius:1px; margin-top:12px; overflow:hidden; }
.cl-trib-bar-fill { height:100%; background:linear-gradient(90deg,var(--gold),var(--gold-light)); border-radius:1px; transition:width 1.5s ease-out; width:0; }
.cl-trib-sub { font-size:10px; color:var(--text-3); margin-top:6px; font-family:'JetBrains Mono',monospace; }

.cl-jrq { display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-bottom:24px; align-items:center; }
.cl-jnode { display:flex; align-items:center; gap:12px; padding:10px 0; position:relative; }
.cl-jnode:not(:last-child)::after { content:''; position:absolute; left:6px; top:32px; width:0.5px; height:calc(100% - 16px); background:linear-gradient(180deg,var(--gold-strong),rgba(201,170,114,0.05)); }
.cl-jdot { width:12px; height:12px; border-radius:50%; border:1px solid var(--gold-strong); background:var(--bg-0); flex-shrink:0; position:relative; z-index:2; }
.cl-jdot.active { background:var(--gold); border-color:var(--gold); box-shadow:0 0 16px rgba(201,170,114,0.6); }
.cl-jdot.active::before { content:''; position:absolute; inset:-4px; border-radius:50%; border:1px solid var(--gold); animation:ringPulse 2s ease-in-out infinite; }
.cl-jcode { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--gold-dark); letter-spacing:.5px; }
.cl-jcode.active { color:var(--gold); font-weight:500; }
.cl-jdesc { font-size:11px; color:var(--text-2); margin-top:2px; line-height:1.4; }
.cl-jdesc.active { color:var(--text-0); }

.cl-radar { position:relative; display:flex; align-items:center; justify-content:center; }
.cl-radar svg { width:240px; height:240px; }
.cl-radar-center { position:absolute; text-align:center; }
.cl-radar-num { font-family:'Fraunces',serif; font-size:36px; color:var(--gold); line-height:1; font-weight:300; }
.cl-radar-num sup { font-size:14px; color:var(--text-2); margin-left:4px; }
.cl-radar-lbl { font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--text-2); text-transform:uppercase; letter-spacing:1.5px; margin-top:6px; }

.cl-actions { display:flex; gap:10px; flex-wrap:wrap; padding-top:24px; border-top:0.5px solid var(--border-0); }
.cl-actions .cta { flex:1; min-width:120px; padding:14px; }
.cl-actions .cta-primary { flex:2; }

@media (max-width:768px) {
  .cl-hero-q { font-size:24px; }
  .cl-ncm { font-size:48px; letter-spacing:1px; }
  .cl-ncm-wrap { padding:0 20px; }
  .cl-ncm-wrap::before,.cl-ncm-wrap::after { width:14px; }
  .cl-tribs { grid-template-columns:repeat(2,1fr); }
  .cl-jrq { grid-template-columns:1fr; }
  .cl-radar svg { width:180px; height:180px; }
  .cl-actions { flex-direction:column; }
}