/* =============================================================
   Cipher Suite — Shared Design System
   Author: Adam Abuarab
   ============================================================= */

:root {
  --bg: #0a0c10;
  --panel: #0f1318;
  --border: #1e2d40;
  --accent: #00ffe0;
  --accent2: #ff4d6d;
  --accent3: #a78bfa;
  --accent4: #fbbf24;
  --text: #c8d8e8;
  --muted: #4a6070;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg); color: var(--text);
  font-family: 'Share Tech Mono', monospace;
  min-height: 100vh; padding: 2rem 1rem;
  position: relative; overflow-x: hidden;
}
body::before {
  content: ''; position: fixed; inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(0,255,224,0.03) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(0,255,224,0.03) 40px);
  pointer-events: none; z-index: 0;
}

.scanline {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.4; animation: scan 4s linear infinite; z-index: 1; pointer-events: none;
}
@keyframes scan { 0%{top:0} 100%{top:100vh} }

.container { max-width: 980px; margin: 0 auto; position: relative; z-index: 2; }
header { text-align: center; margin-bottom: 2.5rem; }

h1 {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.8rem,5vw,3rem); font-weight: 900;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--accent);
  text-shadow: 0 0 20px rgba(0,255,224,.5), 0 0 60px rgba(0,255,224,.2);
  animation: flicker 6s infinite;
}
@keyframes flicker { 0%,95%,100%{opacity:1} 96%{opacity:.85} 97%{opacity:1} 98%{opacity:.9} }

.subtitle { color: var(--muted); font-size:.75rem; letter-spacing:.3em; margin-top:.5rem; text-transform:uppercase; }

/* Panels */
.panel {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 4px; padding: 1.5rem; margin-bottom: 1.5rem; position: relative;
}
.panel::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg,transparent,var(--accent),transparent); opacity:.5;
}
.panel-title {
  font-family:'Orbitron',sans-serif; font-size:.65rem; letter-spacing:.3em;
  color: var(--accent); text-transform:uppercase; margin-bottom:1.2rem;
  display:flex; align-items:center; gap:.5rem;
}
.panel-title::after { content:''; flex:1; height:1px; background:var(--border); }

/* Inputs */
.input-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem; }
@media(max-width:600px){ .input-row{grid-template-columns:1fr} }

label { display:block; font-size:.65rem; letter-spacing:.2em; color:var(--muted); text-transform:uppercase; margin-bottom:.4rem; }
input {
  width:100%; background:#080b0f; border:1px solid var(--border); border-radius:3px;
  color:var(--accent); font-family:'Share Tech Mono',monospace; font-size:1rem;
  padding:.6rem .8rem; outline:none; transition:border-color .2s,box-shadow .2s;
  caret-color:var(--accent); letter-spacing:.1em;
}
input:focus { border-color:var(--accent); box-shadow:0 0 0 1px rgba(0,255,224,.2),inset 0 0 10px rgba(0,255,224,.05); }
.key-hint { font-size:.6rem; color:var(--muted); margin-top:.3rem; letter-spacing:.1em; }
.key-hint .ok  { color:var(--accent); font-weight:bold; }
.key-hint .bad { color:var(--accent2); font-weight:bold; }
.key-hint .warn{ color:var(--accent4); font-weight:bold; }

/* Buttons */
.btn-row { display:flex; gap:1rem; flex-wrap:wrap; }
button {
  font-family:'Orbitron',sans-serif; font-size:.7rem; letter-spacing:.2em;
  text-transform:uppercase; padding:.7rem 1.5rem; border:none; border-radius:3px;
  cursor:pointer; transition:all .15s; flex:1; min-width:120px;
}
.btn-encrypt { background:var(--accent); color:#000; font-weight:700; box-shadow:0 0 15px rgba(0,255,224,.3); }
.btn-encrypt:hover { background:#00fff5; box-shadow:0 0 25px rgba(0,255,224,.5); transform:translateY(-1px); }
.btn-decrypt { background:transparent; color:var(--accent2); border:1px solid var(--accent2); box-shadow:0 0 10px rgba(255,77,109,.2); }
.btn-decrypt:hover { background:rgba(255,77,109,.1); box-shadow:0 0 20px rgba(255,77,109,.4); transform:translateY(-1px); }
.btn-reset { background:transparent; color:var(--muted); border:1px solid var(--border); flex:0; }
.btn-reset:hover { border-color:var(--muted); color:var(--text); }
.btn-gen {
  background:transparent; color:var(--accent3); border:1px solid var(--accent3);
  box-shadow:0 0 10px rgba(167,139,250,.15); flex:0; min-width:unset; font-size:.6rem; padding:.7rem 1rem;
}
.btn-gen:hover { background:rgba(167,139,250,.1); box-shadow:0 0 20px rgba(167,139,250,.35); transform:translateY(-1px); }

/* Step nav */
.step-nav { display:flex; align-items:center; gap:.75rem; margin-bottom:1rem; flex-wrap:wrap; }
.step-label { font-size:.6rem; letter-spacing:.2em; color:var(--muted); text-transform:uppercase; white-space:nowrap; }
.step-btn {
  font-family:'Orbitron',sans-serif; font-size:.6rem; padding:.3rem .7rem;
  flex:0; min-width:unset; border:1px solid var(--border); background:transparent; color:var(--text);
  border-radius:3px; cursor:pointer; transition:all .15s;
}
.step-btn:hover { border-color:var(--accent); color:var(--accent); }
.step-btn:disabled { opacity:.3; cursor:not-allowed; transform:none; }
.step-counter { font-size:.7rem; color:var(--text); min-width:60px; text-align:center; }

/* Output */
.output-block { margin-bottom:1rem; }
.output-label { font-size:.6rem; letter-spacing:.25em; color:var(--muted); text-transform:uppercase; margin-bottom:.3rem; }
.output-value {
  background:#080b0f; border:1px solid var(--border); border-radius:3px;
  padding:.6rem .8rem; word-break:break-all; min-height:2.5rem; line-height:1.8;
  color:var(--text); font-size:.9rem; letter-spacing:.12em;
}
.output-value.result { font-size:1.2rem; color:var(--accent); text-shadow:0 0 8px rgba(0,255,224,.3); letter-spacing:.2em; }
.output-value.result.dm { color:var(--accent2); text-shadow:0 0 8px rgba(255,77,109,.3); }

/* Badges */
.mode-badge {
  display:inline-block; font-family:'Orbitron',sans-serif; font-size:.6rem;
  letter-spacing:.2em; padding:2px 8px; border-radius:2px; margin-left:.5rem; vertical-align:middle;
}
.mode-enc { background:rgba(0,255,224,.15); color:var(--accent); border:1px solid rgba(0,255,224,.3); }
.mode-dec { background:rgba(255,77,109,.15); color:var(--accent2); border:1px solid rgba(255,77,109,.3); }

/* Step tags */
.step-tag {
  display:inline-block; background:rgba(0,255,224,.06); border:1px solid rgba(0,255,224,.15);
  border-radius:2px; padding:1px 7px; margin:2px; font-size:.78rem;
}
.step-tag .lbl { color:var(--muted); font-size:.6rem; margin-right:2px; }
.step-tag .val { color:var(--accent); font-weight:bold; }
.step-tag.dm { background:rgba(255,77,109,.06); border-color:rgba(255,77,109,.15); }
.step-tag.dm .val { color:var(--accent2); }

/* Legend */
.legend { display:flex; gap:1.2rem; flex-wrap:wrap; margin-bottom:1rem; font-size:.6rem; letter-spacing:.1em; }
.legend-item { display:flex; align-items:center; gap:6px; color:var(--muted); }
.legend-dot { width:12px; height:12px; border-radius:2px; flex-shrink:0; }

/* Misc */
.hidden { display:none; }
.error {
  color:var(--accent2); font-size:.8rem; margin-top:.5rem;
  padding:.5rem .8rem; background:rgba(255,77,109,.05);
  border:1px solid rgba(255,77,109,.2); border-radius:3px;
}