:root{
  --bg0:#0b0d0f;
  --bg1:#0f1216;
  --bg2:#12161b;
  --line:rgba(255,255,255,.08);
  --text0:rgba(240,240,240,.92);
  --text1:rgba(240,240,240,.72);
  --text2:rgba(240,240,240,.55);
  --accent:#2aa198;
  --gold:#c9b27c;

  --nav-h: 60px;
  --page-pad: clamp(10px, 2.4vw, 22px);
  --gap: clamp(10px, 2.2vw, 24px);
}

*{ box-sizing:border-box; }

html{
  height:100%;
  background:
    radial-gradient(1000px 600px at 20% 10%, rgba(42,161,152,.10), transparent 55%),
    radial-gradient(900px 700px at 80% 90%, rgba(201,178,124,.06), transparent 60%),
    linear-gradient(180deg, var(--bg0), #07080a);
  background-attachment: fixed;
}

body{
  margin:0;
  min-height:100vh;
  min-height:100svh;
  min-height:100dvh;

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  color:var(--text0);

  background: transparent;

  /* IMPORTANT: page itself does not scroll */
  overflow:hidden;

  /* reserve space for fixed nav */
  padding-top: calc(var(--nav-h) + var(--gap));
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
  padding-bottom: calc(var(--gap) + env(safe-area-inset-bottom, 0px));
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.15'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
  opacity:.25;
  z-index:0;
}

/* ================= NAV ================= */

nav{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:var(--nav-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--gap);
  padding:0 var(--page-pad);
  background:rgba(18,22,27,.82);
  border-bottom:1px solid var(--line);
  backdrop-filter: blur(10px);
  z-index:1000;
}

nav .brand-logo{
  color:var(--gold);
  letter-spacing:.18em;
  font-size:12px;
  text-decoration:none;
  text-transform:uppercase;
  display:flex;
  gap:10px;
  align-items:center;
}

nav .brand-logo:before{
  content:"●";
  color:var(--accent);
  font-size:10px;
}

nav .nav-links{
  list-style:none;
  display:flex;
  gap: clamp(10px, 2vw, 18px);
  margin:0;
  padding:0;
  color:var(--text2);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

nav .nav-links li{
  cursor:pointer;
  transition: background .2s ease, color .2s ease;
}

nav .nav-links li:hover{
  background:rgba(255,255,255,.05);
  color:var(--text1);
}

/* ================= LINKS ================= */

a{
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
  transition: color .15s ease, text-shadow .15s ease;
}

a:visited{
  color: var(--accent);
}

a:hover{
  color: var(--gold);
  text-shadow: 0 0 6px rgba(201,178,124,.35);
}

a:active{
  color: var(--text0);
}


/* ================= WRAPPER (FRAME) ================= */

.wrapper{
  width:min(980px, 100%);
  margin:0 auto;

  padding:1px;
  border-radius:8px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border:1px solid var(--line);
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  position:relative;

  display:flex;
  align-items:stretch;
  justify-content:stretch;

  overflow:hidden;
  isolation:isolate;

  /* EXACT height under fixed nav */
  height: calc(
    100vh - var(--nav-h) - (var(--gap) * 2) - env(safe-area-inset-bottom, 0px)
  );
  min-height:0;
}

@supports (height: 100dvh){
  .wrapper{
    height: calc(
      100dvh - var(--nav-h) - (var(--gap) * 2) - env(safe-area-inset-bottom, 0px)
    );
  }
}

.wrapper::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:8px;
  pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
  z-index:5;
}

/* CRT overlay */
.wrapper::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:8px;
  z-index:20;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.06) 0px,
      rgba(255,255,255,.06) 1px,
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,0) 4px
    ),
    radial-gradient(
      120% 90% at 50% 50%,
      rgba(0,0,0,0) 55%,
      rgba(0,0,0,.35) 100%
    );
  mix-blend-mode:overlay;
  opacity:.25;
}

.error-container {
  display: flex;
  flex-direction: column; /* ← THIS */
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100%;
  gap: 12px; /* optional, but recommended */
}

.httperrorcode{ 
    color: var(--gold); 
    text-align: center;
}

.deactivatedcard{ 
    color: rgb(150,0,0); 
    text-align: center;
}

/* ================= SCROLLING CONTENT ================= */

.page-content{
  flex:1;
  min-height:0;              /* CRITICAL */
  overflow:auto;
  -webkit-overflow-scrolling: touch;

  padding: clamp(14px, 3vw, 28px);

  position:relative;
  z-index:10;

  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.12) rgba(0,0,0,.2);
}

/* ================= TYPOGRAPHY ================= */

.page-content h1,
.page-content h2,
.page-content h3{
  margin-top:0;
}

.page-content h1{
  color:var(--gold);
  letter-spacing:.12em;
  text-transform:uppercase;
}

.page-content h3{
  color:var(--accent);
}

.page-content p,
.page-content li{
  color:var(--text1);
  line-height:1.7;
}

.page-content ul{
  padding-left:1.2em;
}

/* ================= TERMINAL ================= */

#terminal-container{
  width:100%;
  height:100%;
  background:transparent;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.35),
    0 10px 30px rgba(0,0,0,.35);
  z-index:10;
}

.terminal,
.xterm,
.xterm-viewport,
.xterm-screen,
.xterm-text-layer,
.xterm-cursor-layer,
.xterm-selection-layer,
.xterm canvas{
  background: transparent !important;
}

.terminal,
.xterm,
.xterm-viewport{
  width:100% !important;
  height:100% !important;
}

/* ================= SCROLLBARS ================= */

::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-track{ background: rgba(0,0,0,.2); }
::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.10); border-radius:2px; }
::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.16); }

/* ================= SMALL SCREENS ================= */

@media (max-width: 420px){
  :root{ --nav-h:56px; }
  nav .nav-links{
    font-size:11px;
  }
}