/* =========================================================
   NostalgiaNet PRO-SUITE
   ---------------------------------------------------------
   Non-destructive enhancement layer:
   - Command palette
   - Fullscreen / pop-out controls
   - Backup/import/export tools
   - Terminal overlay
   - Audit console
   - Weblet and museum layouts
   CUSTOMIZE: Search "CUSTOMIZE:" for easy edit points.
   ========================================================= */

:root{
  --pro-dock-w: min(720px, calc(100vw - 24px));
  --pro-float: rgba(14, 20, 38, .84);
  --pro-line: color-mix(in oklab, var(--accent) 38%, rgba(255,255,255,.18));
  --pro-ok: #78ffd6;
  --pro-warn: #ffe783;
  --pro-bad: #ff7b9c;
}

body.nn-fullscreen-armed .topbar{
  box-shadow: 0 0 0 1px var(--pro-line), 0 0 38px color-mix(in oklab, var(--accent) 24%, transparent);
}

.nn-probar{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

.nn-pro-btn{
  border:1px solid var(--stroke2);
  color: var(--text);
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.02)),
    color-mix(in oklab, var(--panel2) 72%, transparent);
  padding: 7px 10px;
  border-radius: 13px;
  box-shadow: var(--shadow-1);
  min-height: 34px;
  font: inherit;
  font-weight: 800;
  letter-spacing: .01em;
}

.nn-pro-btn:hover,
.nn-pro-btn:focus-visible{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent), 0 0 24px color-mix(in oklab, var(--accent) 22%, transparent);
  transform: translateY(-1px);
}

.nn-dock{
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  width: var(--pro-dock-w);
  z-index: 9996;
  pointer-events:none;
}

.nn-dock__inner{
  pointer-events:auto;
  border: 1px solid var(--pro-line);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.11), rgba(255,255,255,.03)),
    var(--pro-float);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow:
    0 18px 54px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.14);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding: 10px;
}

.nn-dock__label{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width: 160px;
}
.nn-dock__label b{ font-size: 13px; }
.nn-dock__label span{ color: var(--muted); font-size: 11px; }

.nn-dock__actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.nn-command{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.48);
  backdrop-filter: blur(7px);
  z-index: 10000;
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding: 8vh 12px 12px;
}
.nn-command[aria-hidden="false"]{ display:flex; }

.nn-command__panel{
  width: min(760px, 100%);
  border:1px solid var(--pro-line);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.03)),
    color-mix(in oklab, var(--panel) 92%, rgba(0,0,0,.78));
  box-shadow: 0 24px 90px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.15);
  overflow:hidden;
}

.nn-command__hd{
  padding: 13px;
  border-bottom:1px solid var(--stroke);
  display:flex;
  gap:10px;
  align-items:center;
}
.nn-command__input{
  width:100%;
  border: 1px solid var(--stroke2);
  color: var(--text);
  background: rgba(0,0,0,.22);
  border-radius: 16px;
  padding: 13px 14px;
  font: inherit;
  font-weight: 800;
  outline:none;
}
.nn-command__input:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 19%, transparent);
}
.nn-command__list{
  max-height: min(60vh, 520px);
  overflow:auto;
  padding: 10px;
  display:grid;
  gap:8px;
}
.nn-command__item{
  border:1px solid var(--stroke);
  border-radius: 16px;
  background: color-mix(in oklab, var(--panel2) 70%, transparent);
  padding: 11px 12px;
  display:grid;
  grid-template-columns: auto 1fr auto;
  gap:10px;
  align-items:center;
}
.nn-command__item:hover,
.nn-command__item[aria-selected="true"]{
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 14%, var(--panel2));
}
.nn-command__item small{ color: var(--muted); display:block; margin-top:2px; }
.nn-chip{
  border:1px solid var(--stroke2);
  color: var(--muted);
  padding: 4px 7px;
  border-radius: 999px;
  font-size: 10px;
  white-space:nowrap;
}

.nn-terminal{
  position: fixed;
  inset: auto 12px 76px auto;
  width: min(650px, calc(100vw - 24px));
  max-height: min(70vh, 620px);
  z-index: 9998;
  display:none;
  border:1px solid color-mix(in oklab, var(--accent) 50%, #fff 8%);
  border-radius: 18px;
  overflow:hidden;
  background: rgba(2,6,12,.92);
  box-shadow: 0 22px 80px rgba(0,0,0,.62), 0 0 34px color-mix(in oklab, var(--accent) 20%, transparent);
}
.nn-terminal[aria-hidden="false"]{ display:block; }
.nn-terminal__hd{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding: 10px 12px;
  border-bottom:1px solid rgba(255,255,255,.12);
  background: linear-gradient(90deg, color-mix(in oklab, var(--accent) 22%, transparent), transparent);
}
.nn-terminal__screen{
  padding: 14px;
  min-height: 210px;
  max-height: 50vh;
  overflow:auto;
  font-family: var(--mono);
  color: #d8fff6;
  text-shadow: 0 0 9px color-mix(in oklab, var(--accent) 45%, transparent);
  white-space: pre-wrap;
}
.nn-terminal__form{
  display:flex;
  gap:8px;
  padding: 10px;
  border-top:1px solid rgba(255,255,255,.1);
}
.nn-terminal__form input{
  flex:1;
  border:1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  color: #fff;
  font: inherit;
  padding: 10px;
}

.nn-audit-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap:10px;
}
.nn-audit-item{
  border:1px solid var(--stroke);
  border-radius: 16px;
  background: color-mix(in oklab, var(--panel2) 70%, transparent);
  padding: 10px;
}
.nn-audit-item b{ display:block; margin-bottom:3px; }
.nn-audit-item small{ color: var(--muted); }
.nn-audit-ok{ border-color: color-mix(in oklab, var(--pro-ok) 45%, var(--stroke)); }
.nn-audit-warn{ border-color: color-mix(in oklab, var(--pro-warn) 55%, var(--stroke)); }
.nn-audit-bad{ border-color: color-mix(in oklab, var(--pro-bad) 55%, var(--stroke)); }

.nn-theme-swatches{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap:10px;
}
.nn-swatch{
  min-height:72px;
  border:1px solid var(--stroke2);
  border-radius:16px;
  overflow:hidden;
  background: var(--panel);
  position:relative;
}
.nn-swatch span{
  position:absolute;
  inset:auto 8px 8px 8px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  padding: 4px 8px;
  background: rgba(0,0,0,.34);
  font-size: 11px;
  text-align:center;
}
.nn-swatch[data-theme="aero"]{ background: radial-gradient(circle at 30% 20%, #83f7ff, transparent 40%), linear-gradient(135deg,#0b1638,#112b3f); }
.nn-swatch[data-theme="vapor"]{ background: radial-gradient(circle at 70% 20%, #ff79d1, transparent 40%), linear-gradient(135deg,#251034,#10172e); }
.nn-swatch[data-theme="cyber"]{ background: linear-gradient(135deg,#030c0a,#001f1a 60%,#200018); }
.nn-swatch[data-theme="midnight"]{ background: linear-gradient(135deg,#050816,#11183d 70%,#10101a); }
.nn-swatch[data-theme="terminal"]{ background: linear-gradient(135deg,#000,#041b05 70%,#061); }
.nn-swatch[data-theme="beige"]{ background: linear-gradient(135deg,#e9dcc4,#987d55); color:#201a10; }

.nn-hotspot{
  position:relative;
}
.nn-hotspot::after{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:inherit;
  border:1px solid color-mix(in oklab, var(--accent) 40%, transparent);
  opacity:0;
  pointer-events:none;
  animation: nn-hotspot 3.5s ease-in-out infinite;
}
@keyframes nn-hotspot{
  0%,100%{ opacity:0; transform:scale(.98); }
  50%{ opacity:.8; transform:scale(1.01); }
}

/* Museum + Weblet page layouts */
.nn-hero{
  border:1px solid var(--stroke2);
  border-radius: 24px;
  overflow:hidden;
  background:
    radial-gradient(circle at 20% 10%, color-mix(in oklab, var(--accent) 28%, transparent), transparent 36%),
    linear-gradient(135deg, color-mix(in oklab, var(--panel2) 88%, transparent), color-mix(in oklab, var(--panel) 92%, transparent));
  box-shadow: var(--shadow-2);
}
.nn-hero__scan{
  padding: clamp(18px, 4vw, 34px);
  position:relative;
}
.nn-hero__scan::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  transform: translateX(-100%);
  animation: shimmer 5s linear infinite;
  pointer-events:none;
}
.nn-hero h1{
  margin:0;
  font-size: clamp(30px, 5vw, 58px);
  letter-spacing: -.04em;
  line-height:.92;
}
.nn-hero p{
  color: var(--muted);
  max-width: 72ch;
}

.nn-feature-grid,
.nn-weblet-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap:12px;
}
.nn-feature-card,
.nn-weblet{
  border:1px solid var(--stroke);
  border-radius: 18px;
  overflow:hidden;
  background: color-mix(in oklab, var(--panel2) 70%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.nn-feature-card__hd,
.nn-weblet__hd{
  padding: 11px 12px;
  border-bottom:1px solid var(--stroke);
  background: color-mix(in oklab, var(--accent) 10%, transparent);
  display:flex; justify-content:space-between; gap:8px; align-items:center;
}
.nn-feature-card__bd,
.nn-weblet__bd{ padding: 12px; }
.nn-timeline{
  position:relative;
  display:grid;
  gap:12px;
}
.nn-timeline::before{
  content:"";
  position:absolute;
  left:13px; top:8px; bottom:8px;
  width:2px;
  background: linear-gradient(var(--accent), transparent);
}
.nn-timeline-item{
  position:relative;
  padding-left:40px;
}
.nn-timeline-item::before{
  content:"";
  position:absolute;
  left:5px; top:8px;
  width:18px; height:18px;
  border-radius:50%;
  border:2px solid var(--accent);
  background: var(--panel);
  box-shadow: 0 0 18px color-mix(in oklab, var(--accent) 30%, transparent);
}
.nn-weblet input,
.nn-weblet textarea,
.nn-weblet select{
  width:100%;
  box-sizing:border-box;
}
.nn-pixel-canvas{
  display:grid;
  grid-template-columns: repeat(16, 1fr);
  gap:2px;
  padding:6px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.25);
}
.nn-pixel{
  aspect-ratio:1;
  border:1px solid rgba(255,255,255,.05);
  border-radius:4px;
  background: rgba(255,255,255,.06);
}
.nn-pixel.on{
  background: var(--accent);
  box-shadow: 0 0 12px color-mix(in oklab, var(--accent) 55%, transparent);
}

.nn-marquee-stack{
  display:grid;
  gap:8px;
}
.nn-retro-meter{
  height:12px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.2);
  overflow:hidden;
}
.nn-retro-meter i{
  display:block;
  height:100%;
  width: var(--meter, 50%);
  background: linear-gradient(90deg, var(--accent), color-mix(in oklab, var(--accent) 45%, white));
  box-shadow: 0 0 18px color-mix(in oklab, var(--accent) 40%, transparent);
}

body.nn-konami{
  animation: nn-konami-pulse 1.6s steps(2,end) infinite;
}
@keyframes nn-konami-pulse{
  50%{ filter: hue-rotate(70deg) saturate(1.4); }
}

@media (max-width: 760px){
  .nn-dock{
    left:12px; right:12px; transform:none; width:auto; bottom:10px;
  }
  .nn-dock__inner{
    align-items:flex-start;
    flex-direction:column;
  }
  .nn-dock__actions{
    width:100%;
    justify-content:stretch;
  }
  .nn-dock__actions .nn-pro-btn{
    flex:1;
  }
  .nn-terminal{
    inset: auto 8px 74px 8px;
    width:auto;
  }
  .topbar .hud .nn-probar{
    width:100%;
    justify-content:flex-start;
  }
}