/* ══════════════════════════════════════
   OneTimePad.App — Dark Theme v2
   ══════════════════════════════════════ */

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,sans-serif;
  background:#121212;color:#FAFAFA;line-height:1.5;min-height:100vh;
  display:flex;flex-direction:column}

/* ── Typography ── */
h1,h2,h3{font-weight:700;letter-spacing:.05em;color:#FAFAFA}
.section-label{font-size:12px;text-transform:uppercase;font-weight:700;color:#00E676;letter-spacing:.1em;margin-bottom:8px}
.code,code{font-family:'Courier New',Courier,monospace}
.text-secondary{color:#B0B0B0;font-size:14px}
.text-hint{color:#707070}

/* ── Layout ── */
.page-wrap{max-width:960px;margin:0 auto;padding:0 20px;width:100%}
.content-narrow{max-width:480px;margin:0 auto}
.gap-16>*+*{margin-top:16px}

/* ── Header ── */
header{background:#1E1E1E;border-bottom:1px solid #2E2E2E;padding:16px 0}
.header-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:#FAFAFA}
.logo-icon{width:40px;height:40px;background:#1E1E1E;border:2px solid #00E676;border-radius:10px;
  display:flex;align-items:center;justify-content:center}
.logo-icon svg{width:22px;height:22px;fill:#00E676}
.logo-text{font-size:20px;font-weight:700;letter-spacing:.05em}
.logo-text span{color:#00E676}

nav{display:flex;gap:4px}
nav a{color:#B0B0B0;text-decoration:none;padding:8px 14px;border-radius:8px;font-size:14px;
  font-weight:600;transition:all .2s}
nav a:hover,nav a.active{color:#FAFAFA;background:rgba(0,230,118,.08)}
nav a.active{color:#00E676}

/* ── Cards ── */
.card{background:#1E1E1E;border:1px solid #2E2E2E;border-radius:16px;padding:20px}
.card-active{border-color:#00E676}

/* ── Inputs ── */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:12px;text-transform:uppercase;font-weight:700;color:#B0B0B0;letter-spacing:.1em}
.field input,.field textarea{background:transparent;border:1px solid #3A3A3A;border-radius:12px;
  padding:12px 14px;color:#FAFAFA;font-family:'Courier New',monospace;font-size:14px;
  outline:none;transition:border-color .2s;width:100%;text-transform:uppercase}
.field input:focus,.field textarea:focus{border-color:#00E676}
.field input.input-error,.field textarea.input-error{border-color:#FF5252}
.field-error{color:#FF5252;font-size:12px;margin-top:4px;display:block}
.field input::placeholder,.field textarea::placeholder{color:#707070}
textarea{resize:vertical;min-height:60px}

/* ── Buttons ── */
.btn-primary{background:#00E676;color:#121212;font-weight:700;border:none;border-radius:14px;
  padding:14px 28px;font-size:15px;cursor:pointer;transition:background .2s;width:100%}
.btn-primary:hover{background:#00C853}
.btn-outline{background:transparent;border:1px solid #2E2E2E;color:#B0B0B0;border-radius:10px;
  padding:10px 16px;font-size:14px;cursor:pointer;transition:all .2s;font-weight:600}
.btn-outline:hover{border-color:#00E676;color:#FAFAFA}
.btn-sm{padding:6px 14px;font-size:13px;border-radius:8px}
.btn-link{color:#00E676;text-decoration:none;font-weight:600;font-size:13px;transition:color .2s}
.btn-link:hover{color:#00C853}
.btn-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.btn-grid-3{grid-template-columns:1fr 1fr 1fr}

/* ── Toggle ── */
.toggle-group{display:flex;gap:0;border:1px solid #00E676;border-radius:8px;overflow:hidden}
.toggle-btn{flex:1;padding:10px 0;text-align:center;font-weight:700;font-size:14px;
  cursor:pointer;transition:all .2s;border:none;background:transparent;color:#B0B0B0}
.toggle-btn.active{background:#00E676;color:#121212}

/* ── Table ── */
.msg-table{width:100%;border-collapse:separate;border-spacing:0}
.msg-table thead th{font-size:12px;text-transform:uppercase;font-weight:700;color:#00E676;
  letter-spacing:.1em;padding:12px 14px;text-align:left;border-bottom:1px solid #2E2E2E}
.msg-table tbody tr{transition:background .15s;cursor:pointer}
.msg-table tbody tr:hover{background:rgba(0,230,118,.04)}
.msg-table td{padding:12px 14px;border-bottom:1px solid #1a1a1a;font-size:14px;vertical-align:middle}
.td-user{color:#FAFAFA;font-weight:600;white-space:nowrap;width:120px}
.td-msg{color:#B0B0B0;font-family:'Courier New',monospace;font-size:13px;
  word-break:break-all;max-width:0}
.td-action{width:100px;text-align:right;white-space:nowrap}

/* ── Output ── */
.output-area{font-family:'Courier New',monospace;font-size:16px;font-weight:700;color:#FAFAFA;
  word-break:break-all;padding:14px;background:rgba(0,230,118,.04);border-radius:12px;
  min-height:48px}

/* ── Download badges ── */
.badges{display:flex;align-items:center;gap:12px;justify-content:center;flex-wrap:wrap;margin:20px 0}
.badges a{color:#B0B0B0;text-decoration:none;font-size:14px;font-weight:600;transition:color .2s}
.badges a:hover{color:#00E676}
.badges img{height:44px;width:auto}

/* ── Footer ── */
footer{margin-top:auto;background:#1E1E1E;border-top:1px solid #2E2E2E;padding:20px 0;
  font-size:13px;color:#707070;text-align:center}
footer a{color:#B0B0B0;text-decoration:none}
footer a:hover{color:#00E676}

/* ── Modal overlay ── */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:100;
  align-items:center;justify-content:center;padding:20px}
.modal-overlay.open{display:flex}
.modal{background:#1E1E1E;border:1px solid #2E2E2E;border-radius:16px;padding:24px;
  width:100%;max-width:440px}
.modal h2{margin-bottom:16px}

/* ── Scroll-to-top hint ── */
.scroll-hint{position:fixed;bottom:20px;right:20px;background:#00E676;color:#121212;
  width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:20px;cursor:pointer;opacity:0;transition:opacity .3s;border:none;z-index:50}
.scroll-hint.visible{opacity:1}

/* ── Responsive ── */
@media(max-width:600px){
  .header-inner{flex-direction:column;align-items:flex-start}
  nav{width:100%;overflow-x:auto}
  .msg-table td,.msg-table th{padding:10px 8px;font-size:13px}
  .td-user{width:80px}
  .btn-grid{grid-template-columns:1fr}
}

/* ── Utility ── */
.hidden{display:none!important}
.mt-12{margin-top:12px}
.mt-20{margin-top:20px}
.center{text-align:center}
.bold{font-weight:700}
.accent{color:#00E676}
.text-primary{color:#FAFAFA}

/* ── About page ── */
.about-narrow{max-width:680px;margin:0 auto}
.about-narrow>*+*{margin-top:16px}
.about-card p+p{margin-top:10px}

.cipher-table-wrap{overflow-x:auto;margin:8px 0}
.cipher-table{border-collapse:collapse;font-family:'Courier New',monospace;font-size:14px;text-align:center}
.cipher-table td{padding:6px 10px;border:1px solid #2E2E2E;min-width:32px}
.cipher-table tr:nth-child(even) td{background:rgba(0,230,118,.04)}

.example-box{background:rgba(0,230,118,.04);border-left:3px solid #00E676;border-radius:0 12px 12px 0;
  padding:12px 16px;font-family:'Courier New',monospace;font-size:14px;margin:8px 0}
.example-box p+p{margin-top:6px}

.req-list{display:flex;flex-direction:column;gap:10px}
.req-item{display:flex;align-items:baseline;gap:12px;font-size:14px}
.req-item>span:first-child{font-family:'Courier New',monospace;font-size:18px;min-width:28px}