:root{
  --bg:#000;
  --fg:rgba(235,255,245,.92);
  --muted:rgba(235,255,245,.70);

  --accent:rgba(0,255,136,.95);
  --warn:rgba(255,42,42,.90);
  --blue:rgba(59,130,246,.95);
  --violet:rgba(139,92,246,.95);
  --orange:rgba(249,115,22,.95);

  --glass:rgba(8,12,10,.22);
  --glass2:rgba(0,0,0,.20);
  --stroke:rgba(255,255,255,.08);

  --radius:16px;
  --pad:14px;
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; background:var(--bg); color:var(--fg); overflow-x:hidden; }
body{ font-family:var(--sans); }

/* Matrix canvas */
#matrix-bg{ position:fixed; inset:0; width:100vw; height:100vh; display:block; z-index:0; pointer-events:none; }
body > *:not(#matrix-bg){ position:relative; z-index:1; }

@media (prefers-reduced-motion: reduce){
  #matrix-bg{ display:none !important; }
}

/* Content shell */
.wrap{ max-width:980px; margin:0 auto; padding:84px 14px 22px; }
.topline{ display:flex; align-items:flex-end; justify-content:space-between; gap:10px; margin-bottom:14px; }
.brand{
  font-family:var(--mono); letter-spacing:.14em; text-transform:uppercase;
  font-size:12px; color:var(--warn); text-shadow:0 0 6px rgba(255,42,42,.18);
  user-select:none;
}
.sub{ font-family:var(--mono); font-size:11px; color:rgba(235,255,245,.62); user-select:none; }

/* Glass panel */
.panel{
  border-radius:var(--radius);
  border:1px solid var(--stroke);
  background:var(--glass);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 10px 40px rgba(0,0,0,.45);
  overflow:hidden;
  margin:12px 0;
}
.panel-hd{
  padding:12px 12px 10px;
  border-bottom:1px solid rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; flex-wrap:wrap;
}
.panel-title{
  font-family:var(--mono); letter-spacing:.12em; text-transform:uppercase;
  font-size:11px; color:var(--warn); text-shadow:0 0 6px rgba(255,42,42,.18);
  user-select:none;
}
.panel-bd{ padding:var(--pad); }

.hintline{ font-family:var(--mono); font-size:11px; color:rgba(235,255,245,.72); line-height:1.35; }
.hintline b{ color:var(--accent); }

/* Inputs */
label{
  display:block; font-family:var(--mono);
  font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,42,42,.85);
  margin:10px 0 6px;
}
input,textarea,select{
  width:100%;
  border-radius:14px;
  border:1px solid var(--stroke);
  background:rgba(0,0,0,.22);
  color:var(--fg);
  padding:12px 12px;
  font-size:16px;
  outline:none;
  -webkit-appearance:none;
  appearance:none;
}
textarea{ min-height:120px; resize:vertical; font-family:var(--mono); font-size:12px; }
input:focus,textarea:focus,select:focus{
  border-color:rgba(0,255,136,.35);
  box-shadow:0 0 0 1px rgba(0,255,136,.12) inset;
}

/* Buttons */
.row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.btn{
  border-radius:14px;
  border:1px solid var(--stroke);
  background:rgba(0,0,0,.20);
  color:var(--fg);
  padding:12px 12px;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.02em;
  cursor:pointer;
  user-select:none;
  touch-action:manipulation;
}
.btn:active{ transform:translateY(1px); background:rgba(0,0,0,.28); }
.btn.primary{
  border-color:rgba(0,255,136,.35);
  box-shadow:0 0 0 1px rgba(0,255,136,.12) inset;
}
a.link{ color:rgba(59,130,246,.95); text-decoration:none; }
a.link:hover{ text-decoration:underline; }