:root{
  --pcb:#0a1410;
  --pcb2:#0f2419;
  --mint:#5cffb1;
  --pink:#ff4d9d;
  --gold:#f7c948;
  --ink:#d7ffe9;
  --panel:#0d1c15;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'IBM Plex Mono',monospace;
  color:var(--ink);
  background:
    radial-gradient(circle at 20% 10%, rgba(92,255,177,.10), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(255,77,157,.12), transparent 45%),
    repeating-linear-gradient(0deg, transparent, transparent 38px, rgba(92,255,177,.04) 39px, rgba(92,255,177,.04) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 38px, rgba(92,255,177,.04) 39px, rgba(92,255,177,.04) 40px),
    linear-gradient(160deg, var(--pcb), var(--pcb2));
  background-attachment:fixed;
  min-height:100vh;
}

.cc-app{min-height:100vh;display:flex;flex-direction:column;}

/* header */
.cc-header{padding:22px 16px 10px;text-align:center;}
.cc-title{
  font-family:'Bricolage Grotesque',sans-serif;
  font-weight:800;
  font-size:clamp(2rem,7vw,3.4rem);
  letter-spacing:-.03em;
  margin:0;
  background:linear-gradient(90deg,var(--mint),var(--pink));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 30px rgba(255,77,157,.25);
}
.cc-subtitle{
  font-family:'VT323',monospace;font-size:1.4rem;color:var(--gold);
  margin:2px 0 0;letter-spacing:.04em;
}
.led-blink{
  width:11px;height:11px;border-radius:50%;background:var(--pink);
  box-shadow:0 0 12px 2px var(--pink);animation:blink 1.6s infinite;display:inline-block;
}
@keyframes blink{0%,45%{opacity:1}50%,95%{opacity:.15}}

.cc-main{flex:1;display:flex;align-items:flex-start;justify-content:center;padding:14px;}

/* profile card */
.cc-card{
  width:100%;max-width:420px;background:var(--panel);
  border:1px solid rgba(92,255,177,.3);border-radius:20px;overflow:hidden;
  box-shadow:0 0 0 2px rgba(247,201,72,.08), 0 20px 60px rgba(0,0,0,.6), inset 0 0 40px rgba(92,255,177,.04);
  cursor:grab;user-select:none;
  animation:cardIn .6s cubic-bezier(.2,.9,.2,1) both;
}
.cc-card:active{cursor:grabbing;}
@keyframes cardIn{from{opacity:0;transform:translateY(30px) scale(.96)}to{opacity:1;transform:none}}

.cc-photo{
  position:relative;height:260px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 40%, rgba(247,201,72,.12), transparent 60%), #060d09;
  border-bottom:1px solid rgba(92,255,177,.2);
}
.cc-avatar-img{max-height:220px;max-width:80%;image-rendering:pixelated;filter:drop-shadow(0 0 18px rgba(92,255,177,.4));animation:float 4s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.cc-avatar-loading{font-family:'VT323';font-size:1.3rem;color:var(--mint);opacity:.7;}

.swipe-badge{
  position:absolute;top:20px;font-family:'Bricolage Grotesque';font-weight:800;
  font-size:1.6rem;padding:6px 16px;border-radius:8px;transform:rotate(-12deg);
}
.swipe-badge.like{right:18px;color:var(--mint);border:3px solid var(--mint);}
.swipe-badge.nope{left:18px;color:var(--pink);border:3px solid var(--pink);transform:rotate(12deg);}

.cc-bio{padding:16px 18px 4px;}
.cc-name{font-family:'Bricolage Grotesque';font-weight:800;font-size:1.5rem;margin:0;color:var(--mint);}
.cc-age{font-family:'VT323';font-size:1.2rem;color:var(--gold);}
.cc-tagline{color:var(--pink);font-size:.85rem;margin:2px 0 8px;letter-spacing:.02em;}
.cc-desc{font-size:.85rem;line-height:1.5;color:var(--ink);opacity:.9;margin:0 0 12px;}
.cc-badges{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;}
.cc-badge{
  font-size:.7rem;background:rgba(92,255,177,.1);border:1px solid rgba(92,255,177,.35);
  color:var(--mint);padding:3px 9px;border-radius:20px;
}

.cc-actions{display:flex;gap:12px;padding:8px 18px 4px;}
.cc-btn{
  flex:1;padding:14px;border-radius:14px;border:none;cursor:pointer;
  font-family:'Bricolage Grotesque';font-weight:800;font-size:1rem;transition:transform .15s, box-shadow .15s;
}
.cc-btn:hover{transform:translateY(-2px);}
.cc-btn.reject{background:rgba(255,77,157,.12);color:var(--pink);border:1px solid var(--pink);}
.cc-btn.like{background:linear-gradient(90deg,var(--mint),#2fe0a0);color:#032015;box-shadow:0 6px 20px rgba(92,255,177,.3);}
.cc-hint{text-align:center;font-family:'VT323';color:var(--gold);opacity:.6;padding:6px 0 12px;font-size:1rem;}

/* rejected */
.cc-reject-screen{text-align:center;padding:50px 16px;max-width:520px;animation:cardIn .5s both;}

/* chat */
.cc-chat-shell{
  width:100%;max-width:520px;background:var(--panel);
  border:1px solid rgba(92,255,177,.25);border-radius:18px;
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 16px 50px rgba(0,0,0,.6);height:calc(100vh - 200px);min-height:460px;
  animation:cardIn .5s both;
}
.cc-chat-top{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid rgba(92,255,177,.15);background:#081410;}
.cc-chat-avatar{width:44px;height:44px;border-radius:10px;image-rendering:pixelated;background:#060d09;border:1px solid rgba(247,201,72,.4);}
.cc-chat-name{font-family:'Bricolage Grotesque';font-weight:800;color:var(--mint);}
.cc-online{color:var(--gold);font-size:.7rem;font-family:'IBM Plex Mono';}
.cc-chat-status{font-size:.72rem;color:var(--pink);opacity:.8;}

.cc-meter-wrap{padding:10px 14px 8px;border-bottom:1px solid rgba(92,255,177,.12);}
.cc-meter-label{display:flex;justify-content:space-between;font-size:.72rem;color:var(--gold);margin-bottom:5px;}
.cc-mhz{color:var(--mint);}
.cc-meter-track{height:10px;background:rgba(0,0,0,.4);border-radius:6px;overflow:hidden;border:1px solid rgba(92,255,177,.2);}
.cc-meter-fill{height:100%;background:linear-gradient(90deg,var(--mint),var(--gold),var(--pink));transition:width .5s ease;box-shadow:0 0 10px rgba(255,77,157,.5);}

.cc-messages{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;}
.cc-bubble-row{display:flex;}
.cc-bubble-row.user{justify-content:flex-end;}
.cc-bubble-row.cpu{justify-content:flex-start;}
.cc-bubble{max-width:78%;padding:10px 13px;border-radius:14px;font-size:.85rem;line-height:1.45;animation:pop .3s both;}
@keyframes pop{from{opacity:0;transform:translateY(6px) scale(.97)}to{opacity:1;transform:none}}
.cc-bubble.user{background:linear-gradient(135deg,var(--pink),#c93077);color:#fff;border-bottom-right-radius:4px;}
.cc-bubble.cpu{background:rgba(92,255,177,.1);border:1px solid rgba(92,255,177,.3);color:var(--mint);border-bottom-left-radius:4px;font-family:'IBM Plex Mono';}
.cc-bubble.typing{display:flex;gap:4px;align-items:center;}
.dot{width:7px;height:7px;border-radius:50%;background:var(--mint);animation:td 1s infinite;}
.dot:nth-child(2){animation-delay:.2s}.dot:nth-child(3){animation-delay:.4s}
@keyframes td{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}

.cc-fact{margin:0 14px 6px;padding:8px 12px;font-size:.75rem;color:var(--gold);background:rgba(247,201,72,.08);border:1px dashed rgba(247,201,72,.4);border-radius:10px;animation:pop .4s both;}

.cc-quick{display:flex;gap:6px;overflow-x:auto;padding:8px 14px;border-top:1px solid rgba(92,255,177,.1);}
.cc-chip{white-space:nowrap;font-size:.72rem;background:rgba(255,77,157,.1);border:1px solid rgba(255,77,157,.4);color:var(--pink);padding:6px 11px;border-radius:16px;cursor:pointer;transition:background .15s;}
.cc-chip:hover{background:rgba(255,77,157,.25);}

.cc-input-row{display:flex;gap:8px;padding:10px 14px;border-top:1px solid rgba(92,255,177,.12);}
.cc-input{flex:1;background:#060d09;border:1px solid rgba(92,255,177,.3);border-radius:12px;padding:11px 13px;color:var(--ink);font-family:'IBM Plex Mono';font-size:.85rem;outline:none;}
.cc-input:focus{border-color:var(--mint);box-shadow:0 0 0 2px rgba(92,255,177,.2);}
.cc-send{background:linear-gradient(90deg,var(--mint),#2fe0a0);color:#032015;border:none;border-radius:12px;padding:0 16px;font-family:'Bricolage Grotesque';font-weight:800;cursor:pointer;}
.cc-send:disabled{opacity:.5;cursor:wait;}

.cc-breakup{background:none;border:none;color:var(--pink);opacity:.6;font-size:.72rem;padding:8px;cursor:pointer;font-family:'IBM Plex Mono';}
.cc-breakup:hover{opacity:1;text-decoration:underline;}

/* footer */
.cc-footer{text-align:center;padding:16px;font-size:.72rem;color:var(--ink);opacity:.75;font-family:'VT323';font-size:1rem;}
.cc-footer p{margin:0 0 6px;}
.cc-remix{color:var(--pink);text-decoration:none;border-bottom:1px dotted var(--pink);}
.cc-remix:hover{color:var(--mint);border-color:var(--mint);}