*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:#0A0A0A;color:#00FF41;font-family:'IBM Plex Mono',monospace;font-size:0.95rem;line-height:1.6;overflow-x:hidden}

/* Boot Screen */
.boot-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:#0A0A0A;z-index:100;display:flex;align-items:flex-start;padding:2rem;overflow:hidden}
.boot-screen.hidden{opacity:0;pointer-events:none;transition:opacity 0.5s ease}
.boot-log{font-family:'Share Tech Mono',monospace;font-size:0.85rem;color:#00AA2A;line-height:1.8}
.boot-log .ok{color:#00FF41}
.boot-log .line{opacity:0;animation:bootLine 0.1s ease forwards}
@keyframes bootLine{to{opacity:1}}

/* Main Interface */
.terminal-interface{opacity:0;transition:opacity 0.8s ease}
.terminal-interface.visible{opacity:1}

/* Dashboard Grid */
.dashboard{display:grid;grid-template-columns:1fr 2fr;grid-template-rows:auto 1fr auto;min-height:100vh;gap:0}

/* Panes */
.pane{border:1px solid #00AA2A;position:relative;transition:border-color 0.3s ease,box-shadow 0.3s ease}
.pane:hover{border-color:#00FF41;box-shadow:0 0 8px rgba(0,255,65,0.15)}
.pane-title{background:#1A1A1A;padding:0.5rem 1rem;font-size:0.8rem;font-weight:600;color:#00FF41;letter-spacing:0.05em;border-bottom:1px solid #00AA2A}
.pane-content{padding:1.5rem}

/* Identity */
.identity-pane{grid-column:1;grid-row:1/3}
.domain-name{font-size:clamp(2rem,4vw,3.6rem);font-weight:600;color:#00FF41;line-height:1.2;margin-bottom:1rem}
.cursor{animation:blink 1.06s step-end infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.tagline{color:#00AA2A;font-size:0.85rem}

/* Status */
.status-pane{grid-column:2;grid-row:1}
.status-row{display:flex;justify-content:space-between;padding:0.4rem 0;border-bottom:1px solid #1A1A1A}
.label{color:#00AA2A;font-size:0.8rem}
.value{color:#00FF41;font-size:0.85rem;font-weight:600}
.value.green{color:#00FF41}

/* Navigation */
.nav-pane{grid-column:1;grid-row:3}
.nav-item{display:block;padding:0.4rem 0;color:#00AA2A;text-decoration:none;font-size:0.9rem;transition:color 0.2s ease}
.nav-item:hover,.nav-item.active{color:#FFB000}

/* Content */
.content-pane{grid-column:2;grid-row:2/4}
.prompt{color:#FFB000;margin:1.5rem 0 0.5rem;font-weight:600;font-size:0.85rem}
.prompt:first-child{margin-top:0}
.content-pane p{margin-bottom:0.75rem;color:#00AA2A;font-size:0.9rem}

/* Full-width sections */
.full-section{border:1px solid #00AA2A;margin:0;padding:1.5rem;transition:border-color 0.3s ease}
.full-section:hover{border-color:#00FF41}
.full-section .pane-title{margin:-1.5rem -1.5rem 1.5rem;padding:0.5rem 1rem;background:#1A1A1A;border-bottom:1px solid #00AA2A}

/* ASCII Diagram */
.ascii-diagram{color:#00FF41;font-family:'Share Tech Mono',monospace;font-size:0.8rem;line-height:1.4;text-align:center;margin:1rem 0;overflow-x:auto}
.topology-note{color:#00AA2A;font-size:0.8rem;margin-top:1rem}

/* Principles */
.log-entry{padding:0.75rem 0;border-bottom:1px solid #1A1A1A;color:#00AA2A;font-size:0.875rem}
.timestamp{color:#00AA2A;margin-right:0.75rem;opacity:0.6}
.amber{color:#FFB000;font-weight:600}

/* Footer */
.footer-section{text-align:center;padding:2rem}
.uptime-display{font-size:1.2rem;color:#00FF41;margin-bottom:1rem}
.disconnect-link{color:#00AA2A;font-size:0.85rem}
.disconnect-link a{color:#FF3333;text-decoration:none}
.disconnect-link a:hover{text-decoration:underline}

/* Circuit traces */
.dashboard::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,#00AA2A 20%,#00AA2A 80%,transparent);opacity:0.3}

/* Card reveal */
.card{opacity:0;transform:translateY(10px);transition:opacity 0.5s ease,transform 0.5s ease}
.card.visible{opacity:1;transform:translateY(0)}

/* Responsive */
@media(max-width:768px){
  .dashboard{grid-template-columns:1fr;grid-template-rows:auto auto auto auto}
  .identity-pane{grid-column:1;grid-row:1}
  .status-pane{grid-column:1;grid-row:2}
  .nav-pane{grid-column:1;grid-row:3}
  .content-pane{grid-column:1;grid-row:4}
}