*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}

:root{
  --bg:       #010d12;
  --surface:  #021820;
  --border:   rgba(0,212,255,0.25);
  --accent:   #00d4ff;
  --accent2:  #00ff9d;
  --dim:      rgba(0,212,255,0.08);
  --text:     #a0e8f0;
  --text-dim: rgba(160,232,240,0.4);
  --glow:     0 0 8px rgba(0,212,255,0.4);
  --glow-lg:  0 0 24px rgba(0,212,255,0.3);
  --amber:    #c8860a;
}

html,body{
  width:100%;height:100%;
  overflow:hidden;
  background:var(--bg);
  font-family:'Share Tech Mono',monospace;
  color:var(--text);
  cursor:crosshair;
}

/* ── SCANLINE OVERLAY ── */
body::after{
  content:'';
  position:fixed;inset:0;
  background:repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 2px,
    rgba(0,0,0,0.08) 2px,
    rgba(0,0,0,0.08) 4px
  );
  pointer-events:none;
  z-index:100;
}

/* ── TERMINAL FRAME ── */
#terminal{
  position:fixed;inset:0;
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:0;
  padding:8px;
  z-index:1;
}

/* ── TOP BAR ── */
#topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:4px 12px;
  border:1px solid var(--border);
  border-bottom:none;
  background:var(--surface);
  font-size:0.6rem;
  letter-spacing:0.3em;
  color:var(--text-dim);
  position:relative;
}
#topbar::before{
  content:'';
  position:absolute;
  bottom:0;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
}
.topbar-left{display:flex;gap:2rem;align-items:center;}
.topbar-center{
  font-size:0.55rem;
  letter-spacing:0.5em;
  color:var(--accent);
  opacity:0.7;
}
.topbar-right{display:flex;gap:2rem;align-items:center;}
.sys-status{
  display:flex;align-items:center;gap:0.4rem;
}
.status-dot{
  width:5px;height:5px;border-radius:50%;
  background:var(--accent2);
  box-shadow:0 0 6px var(--accent2);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.3;}}

/* ── MAIN GRID ── */
#main{
  border:1px solid var(--border);
  border-top:none;border-bottom:none;
  display:grid;
  grid-template-columns: 1.4fr 1.6fr 1.6fr 1.4fr;
  grid-template-rows: 1.3fr 1.2fr 0.9fr;
  gap:1px;
  background:var(--border);
  overflow:hidden;
  position:relative;
}

/* background grid texture */
#main::before{
  content:'';
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(0,212,255,0.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,212,255,0.03) 1px,transparent 1px);
  background-size:40px 40px;
  pointer-events:none;
  z-index:0;
}

/* ── WIDGET BASE ── */
.widget{
  background:var(--surface);
  position:relative;
  overflow:hidden;
  cursor:pointer;
  transition:background 0.2s;
  z-index:1;
  display:flex;
  flex-direction:column;
  min-height:0;
}
.widget:hover{
  background:rgba(0,30,45,1);
}
.widget:hover .widget-border{
  border-color:rgba(0,212,255,0.5);
  box-shadow:inset 0 0 20px rgba(0,212,255,0.05);
}

/* inner border with corner accents */
.widget-border{
  position:absolute;inset:4px;
  border:1px solid var(--border);
  pointer-events:none;
  transition:border-color 0.3s,box-shadow 0.3s;
  z-index:8;
}

/* 4-px gutter mask — paints over any canvas content that enters the margin zone */
.widget::after{
  content:'';
  position:absolute;inset:0;
  border:4px solid var(--surface);
  pointer-events:none;
  z-index:7;
  transition:border-color 0.2s;
}
.widget:hover::after{
  border-color:rgba(0,30,45,1);
}
.widget-border::before,.widget-border::after{
  content:'';position:absolute;
  width:8px;height:8px;
  border-color:var(--accent);
  border-style:solid;
}
.widget-border::before{top:-1px;left:-1px;border-width:1px 0 0 1px;}
.widget-border::after{bottom:-1px;right:-1px;border-width:0 1px 1px 0;}

/* ── WIDGET HEADER ── */
.widget-header{
  padding:7px 12px 5px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(0,212,255,0.1);
  flex-shrink:0;
  position:relative;
  z-index:6;
}
.widget-label{
  font-family:'Orbitron',sans-serif;
  font-size:clamp(0.55rem,0.9vw,0.72rem);
  font-weight:700;
  letter-spacing:0.15em;
  color:#fff;
  text-transform:uppercase;
  text-shadow:var(--glow);
}
.widget-id{
  font-size:clamp(0.48rem,0.7vw,0.58rem);
  letter-spacing:0.2em;
  color:var(--text-dim);
}
.widget-status{
  font-size:clamp(0.48rem,0.7vw,0.58rem);
  letter-spacing:0.2em;
  color:var(--accent2);
  opacity:0.6;
}

/* ── WIDGET BODY — collapsed state ── */
.widget-body{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:8px 12px;
  position:relative;
  overflow:hidden;
  text-align:center;
  min-height:0;
  z-index:6;
}

/* ── WIDGET TITLE ── */
.widget-title{
  font-family:'Orbitron',sans-serif;
  font-size:clamp(0.55rem,1vw,0.75rem);
  font-weight:700;
  letter-spacing:0.12em;
  color:#fff;
  text-align:center;
  margin-bottom:4px;
  text-shadow:var(--glow);
}
.widget-subtitle{
  font-size:0.42rem;
  letter-spacing:0.25em;
  color:var(--text-dim);
  text-align:center;
  margin-bottom:6px;
}

  50%{opacity:0.2;}
}

/* ── WIDGET GRID LAYOUT ── */
#w-subject   { grid-column: 1;          grid-row: 1; }
#w-identify  { grid-column: 2 / span 2; grid-row: 1; }
#w-caps      { grid-column: 4;          grid-row: 1 / span 2; }
#w-caps.skills-expanded {
  grid-column: 2 / span 3;
  grid-row: 1 / span 2;
  z-index: 10;
  transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
}
#w-mission   { grid-column: 1;          grid-row: 2; }
#w-prior     { grid-column: 2 / span 2; grid-row: 2; }
#w-career    { grid-column: 1;          grid-row: 3; }
#w-contact    { grid-column: 2; grid-row: 3; }
#w-protocols  { grid-column: 3; grid-row: 3; }
#w-references { grid-column: 4; grid-row: 3; }

/* ── BOTTOM BAR ── */
#bottombar{
  border:1px solid var(--border);
  border-top:none;
  background:var(--surface);
  display:flex;
  align-items:center;
  gap:1rem;
  padding:0 12px;
  height:36px;
  position:relative;
  overflow:hidden;
}
#bottombar::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
}
#stream-label{
  font-size:0.48rem;
  letter-spacing:0.3em;
  color:var(--accent);
  opacity:0.6;
  white-space:nowrap;
  flex-shrink:0;
}
#stream-canvas{
  flex:1;
  height:24px;
  opacity:0.6;
}
#stream-right{
  font-size:0.45rem;
  letter-spacing:0.2em;
  color:var(--text-dim);
  white-space:nowrap;
  flex-shrink:0;
}

/* ── AMBIENT: hex scroll ── */
#hex-scroll{
  position:fixed;
  right:0;top:0;bottom:0;
  width:32px;
  overflow:hidden;
  opacity:0.04;
  pointer-events:none;
  z-index:1;
  font-size:0.45rem;
  letter-spacing:0.1em;
  color:var(--accent);
  line-height:1.4;
  word-break:break-all;
}

/* comm widget special */

@keyframes fadeUp{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
@keyframes pin-ping{
  0%{transform:scale(1);opacity:0.8;}
  100%{transform:scale(3);opacity:0;}
}