/* ============================================================
   PROCYBER — interactive SOC console  (self-hosted)
   ============================================================ */
#console{ padding:clamp(70px,11vh,140px) 0; position:relative; }
#console .wrap{ max-width:var(--maxw,1200px); margin:0 auto; padding:0 clamp(20px,5vw,60px); }
.soc{ max-width:780px; margin:34px auto 0; border-radius:14px; overflow:hidden;
  border:1px solid rgba(60,240,255,.22); background:rgba(5,9,20,.92);
  box-shadow:0 44px 110px -40px rgba(47,244,255,.42), inset 0 0 0 1px rgba(60,240,255,.04); }
.soc-bar{ display:flex; align-items:center; gap:8px; padding:11px 14px; background:rgba(10,18,38,.92); border-bottom:1px solid rgba(60,240,255,.14); }
.soc-dot{ width:11px; height:11px; border-radius:50%; background:rgba(255,255,255,.16); }
.soc-dot:nth-child(1){ background:#ff5f56; } .soc-dot:nth-child(2){ background:#ffbd2e; } .soc-dot:nth-child(3){ background:#27c93f; }
.soc-title{ margin-left:8px; font-family:"Space Mono",monospace; font-size:11px; color:#8294ba; letter-spacing:.08em; }
.soc-screen{ position:relative; font-family:"Space Mono",ui-monospace,monospace; font-size:13px; line-height:1.62; color:#cdf7e6;
  padding:16px 16px 14px; height:clamp(300px,46vh,400px); overflow-y:auto; cursor:text; outline:none;
  background:radial-gradient(130% 120% at 50% 0%, rgba(18,42,40,.22), transparent 62%); }
.soc-screen::-webkit-scrollbar{ width:8px; }
.soc-screen::-webkit-scrollbar-thumb{ background:rgba(60,240,255,.22); border-radius:8px; }
.soc-out{ white-space:pre-wrap; word-break:break-word; position:relative; z-index:1; }
.soc-out > div{ animation:socIn .18s ease both; }
@keyframes socIn{ from{ opacity:0; transform:translateY(2px); } }
.soc-out .c{ color:#5dffb0; } .soc-out .cy{ color:#2ff4ff; } .soc-out .m{ color:#ff6ad5; }
.soc-out .d{ color:#7e90b6; } .soc-out .w{ color:#ffae3d; } .soc-out .gr{ color:#7b62ff; }
.soc-line{ display:flex; align-items:baseline; gap:9px; margin-top:3px; position:relative; z-index:1; }
.soc-prompt{ color:#5dffb0; flex:none; }
.soc-field{ flex:1; min-width:0; background:none; border:0; outline:none; color:#eafcff; font:inherit; caret-color:#5dffb0; padding:0; }
.soc-scan{ position:absolute; inset:0; pointer-events:none; z-index:2; mix-blend-mode:overlay; opacity:.5;
  background:repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(0,0,0,.4) 3px); }
@media (max-width:600px){ .soc-screen{ font-size:12px; } }
@media (prefers-reduced-motion:reduce){ .soc-out > div{ animation:none; } }