/* style.css — Nuclear HUD Extended */
body {
  background: radial-gradient(circle at 30% 30%, #0d0e12 0%, #000 90%);
  color: #cde7e4;
  font-family: 'Share Tech Mono', monospace;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.mono, h1, h2, h3 {
  font-family: 'Orbitron', monospace;
  letter-spacing: 1px;
  color: #ff4d4d;
}

a { color: #55fca1; text-decoration: none; }
a:hover { text-shadow: 0 0 6px #55fca1; }

/* Header */
.hud-header {
  background: rgba(10,10,15,0.8);
  border-bottom: 1px solid #ff4d4d;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 25px;
  position: sticky;
  top: 0;
  z-index: 1000;
}
.logo { height: 72px; transition: transform .4s; }
.logo:hover { transform: scale(1.05); }
.onion-btn {
  background: linear-gradient(90deg, #ff4d4d, #ff7755);
  border: none;
  color: #fff;
  padding: 12px 18px;
  border-radius: 4px;
  font-family: 'Orbitron', monospace;
  cursor: pointer;
  transition: 0.3s;
}
.onion-btn:hover { box-shadow: 0 0 14px #ff4d4d; }
.menu-toggle {
  background: none;
  border: none;
  color: #55fca1;
  font-size: 1.5em;
  cursor: pointer;
}

/* Hero */
.hero {
  background: linear-gradient(160deg, rgba(255,77,77,0.15) 0%, rgba(0,255,150,0.06) 80%);
  padding: 100px 20px;
  text-align: center;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}
.hero-title {
  font-family: 'Orbitron', monospace;
  font-size: 2.6em;
  color: #ff4d4d;
  text-shadow: 0 0 12px #ff4d4d, 0 0 28px #ff4d4d33;
}
.hero-sub {
  color: #9adeb8;
  font-size: 1.1em;
  margin-top: 10px;
  margin-bottom: 25px;
}
.cta-button {
  background: linear-gradient(90deg, #55fca1, #20d991);
  color: #000;
  border: none;
  padding: 14px 26px;
  font-family: 'Orbitron', monospace;
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 6px;
  transition: all .3s;
}
.cta-button:hover {
  box-shadow: 0 0 15px #55fca177, 0 0 25px #20d99155;
  transform: translateY(-3px);
}
.type-line {
  color: #55fca1;
  margin-top: 18px;
  min-height: 1em;
  font-size: 1em;
  opacity: 0.8;
}

/* Layout */
.container { display: flex; flex: 1; }
.sidebar {
  width: 260px;
  background: rgba(5,5,8,0.9);
  backdrop-filter: blur(8px);
  border-right: 1px solid #222;
  padding: 25px;
  transition: all 0.4s;
}
.page-wrapper main {
  flex: 1;
  padding: 35px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* Cards */
.card {
  background: rgba(20,22,25,0.65);
  border: 1px solid #222;
  border-radius: 10px;
  padding: 26px;
  backdrop-filter: blur(15px);
  transition: all 0.3s ease-in-out;
}
.card:hover { transform: translateY(-4px); }
.neon-glow {
  border-color: #ff4d4d;
  box-shadow: 0 0 10px #ff4d4d33, inset 0 0 10px #ff4d4d22;
}

/* Sidebar nav */
.nav-title { color: #55fca1; font-size: 0.9em; margin-bottom: 10px; }
.nav-link {
  display: block;
  color: #aaa;
  padding: 7px 0;
  transition: all .2s;
}
.nav-link i { width: 24px; text-align: center; }
.nav-link:hover { color: #55fca1; text-shadow: 0 0 8px #55fca1; }
.nav-link.active { color: #ff4d4d; text-shadow: 0 0 10px #ff4d4d; }

/* Footer */
.site-footer {
  background: rgba(5,5,10,0.9);
  border-top: 1px solid #222;
  padding: 40px 25px;
  color: #888;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 25px;
}
.footer-col h3 { color: #55fca1; font-size: 1em; }
.footer-col ul { list-style: none; padding: 0; }
.footer-col ul li { margin: 6px 0; }
.footer-col a { color: #cde7e4; }
.footer-col a:hover { color: #ff4d4d; text-shadow: 0 0 8px #ff4d4d; }

/* Responsive */
@media (max-width: 900px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: -270px;
    height: 100%;
    overflow-y: auto;
  }
  .sidebar.active { left: 0; z-index: 1001; }
  .page-wrapper main { padding: 25px 18px; }
  .hero { padding: 80px 12px; }
  .hero-title { font-size: 2em; }
}
/* style.css — HUD + telemetry */
body {
  background: radial-gradient(circle at 30% 30%, #0d0e12 0%, #000 90%);
  color: #cde7e4;
  font-family: 'Share Tech Mono', monospace;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.hud-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(10,10,15,0.8);
  border-bottom: 1px solid #ff4d4d;
  padding: 12px 28px;
  position: sticky;
  top: 0;
  z-index: 1000;
}
.logo-area {
  display: flex;
  align-items: center;
  gap: 20px;
}
.logo {
  height: 80px;
  transition: transform .4s;
}
.logo:hover { transform: scale(1.05); }

/* Sensors */
.status-dash {
  display: flex;
  flex-direction: column;
  font-size: 0.85em;
  gap: 4px;
}
.sensor {
  color: #55fca1;
}
.sensor code {
  color: #ff4d4d;
}

/* Console bar */
.console-bar {
  background: rgba(5,10,10,0.8);
  border-bottom: 1px solid #222;
  font-size: 0.9em;
  padding: 6px 20px;
  color: #7df6ba;
}
.console-line code {
  color: #ff4d4d;
}

/* Buttons */
.onion-btn {
  background: linear-gradient(90deg, #ff4d4d, #ff7755);
  border: none;
  color: #fff;
  padding: 12px 18px;
  border-radius: 4px;
  font-family: 'Orbitron', monospace;
  cursor: pointer;
}
.onion-btn:hover { box-shadow: 0 0 15px #ff4d4d; }
.menu-toggle {
  background:none;border:none;color:#55fca1;font-size:1.5em;cursor:pointer;margin-left:10px;
}

/* Hero */
.hero {
  background: linear-gradient(160deg, rgba(255,77,77,0.15), rgba(0,255,150,0.05));
  border-radius: 10px;
  padding: 100px 20px;
  text-align: center;
  margin: 35px 0;
}
.hero-title { font-family: 'Orbitron'; font-size: 2.6em; color:#ff4d4d; text-shadow:0 0 12px #ff4d4d; }
.hero-sub { color:#9adeb8; font-size:1.1em; margin:10px 0 25px; }
.cta-button { background:linear-gradient(90deg,#55fca1,#20d991); color:#000; border:none; padding:14px 26px; font-family:'Orbitron'; border-radius:6px; cursor:pointer; transition:all .3s; }
.cta-button:hover { box-shadow:0 0 20px #55fca177; transform:translateY(-3px); }
.type-line { color:#55fca1; margin-top:18px; font-size:1em; opacity:.8; }

/* Layout */
.container { display:flex; flex:1; }
.sidebar {
  width:260px;
  background:rgba(5,5,8,0.9);
  backdrop-filter:blur(8px);
  border-right:1px solid #222;
  padding:25px;
  transition:.3s;
}
.page-wrapper main {
  flex:1;
  padding:35px;
  display:flex;
  flex-direction:column;
  gap:30px;
}

/* Cards */
.card {
  background:rgba(20,22,25,0.65);
  border:1px solid #222;
  border-radius:10px;
  padding:26px;
  backdrop-filter:blur(15px);
}
.neon-glow { border-color:#ff4d4d; box-shadow:0 0 10px #ff4d4d33, inset 0 0 10px #ff4d4d22; }

/* Footer */
.site-footer {
  background:rgba(5,5,10,0.9);
  border-top:1px solid #222;
  padding:40px 25px;
  color:#888;
}
.footer-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:25px;
}
.footer-col h3 { color:#55fca1; }

/* Responsivity */
@media(max-width:900px){
  .sidebar{position:fixed;top:0;left:-270px;height:100%;overflow-y:auto;}
  .sidebar.active{left:0;z-index:1001;}
  .status-dash{display:none;}
  .page-wrapper main{padding:25px 18px;}
  .hero{padding:80px 12px;}
  .hero-title{font-size:2em;}
}
/* Additional layout for index */
.grid-3{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px;
  margin-top:20px;
}
.grid-2{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:20px;
  margin-top:10px;
}
.small-card{
  background:rgba(12,14,16,0.7);
  border:1px solid #222;
  border-radius:8px;
  padding:18px;
  transition:.3s;
}
.small-card:hover{box-shadow:0 0 10px #ff4d4d66;}
.list-neon li{
  margin:8px 0;
  list-style:none;
  color:#cde7e4;
}
.list-neon i{color:#55fca1;margin-right:8px;}
.dial{
  background:rgba(30,35,40,0.6);
  border:1px solid #ff4d4d;
  border-radius:50%;
  width:150px;height:150px;
  display:flex;align-items:center;justify-content:center;
  font-size:0.9em;color:#55fca1;margin:auto;
  box-shadow:0 0 15px #ff4d4d33,inset 0 0 15px #ff4d4d22;
}
.dial span{max-width:80px;text-align:center;}
/* Additional layout for index */
.grid-3{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px;
  margin-top:20px;
}
.grid-2{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:20px;
  margin-top:10px;
}
.small-card{
  background:rgba(12,14,16,0.7);
  border:1px solid #222;
  border-radius:8px;
  padding:18px;
  transition:.3s;
}
.small-card:hover{box-shadow:0 0 10px #ff4d4d66;}
.list-neon li{
  margin:8px 0;
  list-style:none;
  color:#cde7e4;
}
.list-neon i{color:#55fca1;margin-right:8px;}
.dial{
  background:rgba(30,35,40,0.6);
  border:1px solid #ff4d4d;
  border-radius:50%;
  width:150px;height:150px;
  display:flex;align-items:center;justify-content:center;
  font-size:0.9em;color:#55fca1;margin:auto;
  box-shadow:0 0 15px #ff4d4d33,inset 0 0 15px #ff4d4d22;
}
.dial span{max-width:80px;text-align:center;}
/* Fix for word wrapping and text overflow */
p, li, .console-line, .hero-sub, .card, .small-card, .dial span {
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}

.console-line {
  white-space: normal;      /* allow wrapping instead of long single line */
}

.card p {
  line-height: 1.6;
}

.hero-sub {
  max-width: 800px;
  margin: 0 auto 25px;
}

/* Optional: prevent sidebar links from exceeding width */
.nav-link {
  word-break: break-all;
}
/* --- FORCE LINE BREAKS --- */
* {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

p, li, .console-line, .hero-sub, .card, .small-card, 
.dial span, .footer-col p, .nav-link, .sensor, code {
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

/* Для консольных и длинных системных строк */
.console-bar, .console-line {
  overflow-wrap: anywhere !important;
  word-break: break-all !important;
  white-space: pre-wrap !important;
}

/* Ограничим ширину, чтобы текст не вылез */
.card, .small-card, .console-bar, .footer-col p {
  max-width: 100%;
  overflow: hidden;
}
/* --- CONTAINER FIX --- */
.page-wrapper main {
  flex: 1;
  padding: 35px;
  display: flex;
  flex-direction: column;
  align-items: stretch;        /* ensures children can't escape */
  box-sizing: border-box;
}

.card, .grid-2, .grid-3 {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;             /* prevents overflow */
  margin: 0 auto 25px;
  overflow: hidden;
}

/* prevent grids from expanding horizontally */
.grid-2, .grid-3 {
  justify-items: stretch;
  align-items: stretch;
  overflow-x: hidden;
}

/* global fallback for any rogue block */
main * {
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  word-break: break-word;
}
/* --- HARD WIDTH ALIGNMENT FIX --- */

/* All main sections stay within a unified content width */
main .card, 
main .hero, 
main .grid-2, 
main .grid-3 {
  position: relative;
  display: block;
  width: 100%;
  max-width: 1100px;          /* unified visual width limit */
  margin: 0 auto 32px auto;   /* centered horizontally */
  box-sizing: border-box;
}

/* Prevent any child grid from escaping card bounds */
.card .grid-2, 
.card .grid-3 {
  width: 100%;
  max-width: 100%;
  margin: 20px 0 0 0;
  padding: 0;
  box-sizing: border-box;
}

/* Grid columns adapt but never overflow */
.grid-2, .grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  justify-content: center;
  align-items: stretch;
  overflow: hidden;
}

/* Optional: make hero the same width */
.hero {
  max-width: 1100px;
  margin: 40px auto;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}

/* Guarantee no global overflow */
body, html {
  overflow-x: hidden;
}
/* Hide hamburger by default (desktop) */
.menu-toggle {
  display: none;
}

/* Show it on mobile breakpoint */
@media (max-width: 900px) {
  .menu-toggle {
    display: inline-block;
  }
}
/* ---- ONION & COPY BLOCKS ---- */

.onion-block,
.mirror-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  flex-wrap: wrap;
}

.onion-input,
.mirror-item input {
  flex: 1;
  background: rgba(10, 12, 15, 0.8);
  border: 1px solid #222;
  border-radius: 6px;
  padding: 10px 14px;
  font-family: 'Share Tech Mono', monospace;
  color: #55fca1;
  font-size: 0.95em;
  box-shadow: inset 0 0 8px #ff4d4d22;
  transition: 0.3s;
}

.onion-input:focus,
.mirror-item input:focus {
  outline: none;
  border-color: #ff4d4d;
  box-shadow: 0 0 10px #ff4d4d44;
}

.copy-btn,
.mirror-item .copy-btn {
  background: linear-gradient(90deg, #ff4d4d, #ff7755);
  border: none;
  color: #fff;
  font-family: 'Orbitron', monospace;
  padding: 10px 18px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.copy-btn:hover,
.mirror-item .copy-btn:hover {
  box-shadow: 0 0 15px #ff4d4d99;
  transform: translateY(-2px);
}

.copy-btn:active {
  transform: scale(0.96);
}

/* Neon effect flash when copied (temporary state set from JS via innerHTML change) */
.copy-btn.copied {
  background: linear-gradient(90deg, #55fca1, #20d991);
  color: #000;
  box-shadow: 0 0 15px #55fca177;
}

/* Mirror grid alignment */
.mirror-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
  margin-top: 15px;
}

.mirror-btn {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.95em;
}
/* ---- PGP KEY & FINGERPRINT BLOCK ---- */

.pgp-block {
  background: rgba(8, 10, 12, 0.85);
  border: 1px solid #222;
  border-left: 3px solid #ff4d4d;
  border-radius: 6px;
  padding: 18px 16px;
  font-family: 'Share Tech Mono', monospace;
  color: #55fca1;
  font-size: 0.9em;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre-wrap;
  box-shadow: inset 0 0 10px #ff4d4d22;
  transition: border-color 0.3s, box-shadow 0.3s;
  margin-top: 12px;
}

.pgp-block:hover {
  border-left-color: #55fca1;
  box-shadow: 0 0 12px #55fca144, inset 0 0 12px #55fca122;
}

/* Inline fingerprint highlight (for shorter codes) */
.pgp-inline {
  display: inline-block;
  background: rgba(15, 17, 20, 0.9);
  color: #9adeb8;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #222;
  box-shadow: inset 0 0 6px #55fca133;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.88em;
}

/* Optional scroll glow effect for long keys */
.pgp-block::-webkit-scrollbar {
  height: 6px;
}
.pgp-block::-webkit-scrollbar-thumb {
  background: #ff4d4d44;
  border-radius: 3px;
}
.pgp-block::-webkit-scrollbar-thumb:hover {
  background: #55fca155;
}
/* ---- PGP SHORT KEY INPUT ---- */

.onion-block input#pgp1 {
  background: rgba(8, 10, 12, 0.85);
  border: 1px solid #ff4d4d99;
  border-left: 3px solid #ff4d4d;
  color: #55fca1;
  font-family: 'Share Tech Mono', monospace;
  letter-spacing: 1px;
  font-size: 0.95em;
  text-align: center;
  padding: 10px 14px;
  border-radius: 6px;
  box-shadow: inset 0 0 12px #ff4d4d33;
  transition: 0.3s;
}

.onion-block input#pgp1:focus,
.onion-block input#pgp1:hover {
  outline: none;
  border-color: #55fca1;
  box-shadow: 0 0 10px #55fca166, inset 0 0 10px #55fca133;
}

/* When copy button next to it flashes "Copied!" */
.onion-block #pgp1 + .copy-btn.copied {
  background: linear-gradient(90deg, #55fca1, #1ed190);
  color: #000;
  box-shadow: 0 0 15px #55fca188;
}

/* Slight spacing correction */
.onion-block {
  align-items: stretch;
}
/* ---- FIX TEXT WRAP FOR LEGAL PAGES ---- */
main, 
main section, 
main p, 
main li, 
main code, 
.card, 
.card p, 
.card li, 
.console-line, 
.mono, 
.footer-col p {
  white-space: normal !important;          /* allow full line breaks */
  word-break: break-word !important;       /* split long words/URLs */
  overflow-wrap: anywhere !important;      /* wrap even continuous strings */
  hyphens: auto;
  box-sizing: border-box;
  max-width: 100%;
}

/* ensure no flex element stretches wider on long lines */
.card, .hero, .console-bar {
  flex: 1 1 100%;
  min-width: 0;
  max-width: 1100px;
  margin: 0 auto 25px auto;
}

/* make sure HTML/legal text doesn't cause horizontal scroll */
html, body {
  overflow-x: hidden;
}
/* --- CODE & LEGAL TEXT FIX --- */

/* Normal wrapping and visible spaces in code or legal text */
code,
.pgp-block,
.console-line code {
  font-family: 'Share Tech Mono', monospace;
  white-space: pre-wrap !important;    /* respect spaces but allow line breaks */
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  line-break: anywhere;
  hyphens: manual;
}

/* Ensure multiple spaces are still visible (for legal paragraphs) */
pre, code, .pgp-block {
  white-space: pre-wrap;
  tab-size: 4;
}

/* Extra fix for inputs containing long keys or fingerprints */
input[type="text"], .onion-input {
  word-spacing: normal;
  letter-spacing: 0.5px;
  white-space: normal !important;
}

/* Remove forced flex shrinkage that can compress code text */
.card, .pgp-block {
  min-width: 0;
}