/* ============================================================
   FRIOTAÍOCH Wallet — TERMINAL REDESIGN
   Dense, data-rich, crypto-console aesthetic
   ============================================================ */

* { box-sizing: border-box; }

:root {
  --term-bg: #05090a;
  --term-panel: #0a1210;
  --term-panel-2: #0d1815;
  --term-line: rgba(31, 158, 110, 0.22);
  --term-line-bright: rgba(31, 158, 110, 0.5);
  --term-green: #25C888;
  --term-green-dim: #1F9E6E;
  --term-gold: #E4B640;
  --term-text: #cfe9dd;
  --term-muted: #6f9486;
  --term-red: #ff5c5c;
  --mono: 'IBM Plex Mono', 'JetBrains Mono', monospace;
  --sans: 'Space Grotesk', sans-serif;
}

html, body {
  margin: 0; padding: 0;
  background: var(--term-bg);
  color: var(--term-text);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* scanline + grid backdrop */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(31,158,110,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31,158,110,0.035) 1px, transparent 1px);
  background-size: 32px 32px, 32px 32px;
}
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(
    0deg, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,0.12) 3px);
  opacity: 0.4;
}
body > * { position: relative; z-index: 1; }

a { color: var(--term-green); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- top command bar ---------- */
.termbar {
  display: flex; align-items: center; gap: 18px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--term-line-bright);
  background: linear-gradient(180deg, var(--term-panel), var(--term-bg));
  position: sticky; top: 0; z-index: 50;
}
.termbar-brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--term-text); text-decoration: none;
}
.termbar-logo { width: 26px; height: 26px; border-radius: 5px; }
.termbar-brand b {
  font-family: var(--mono); font-weight: 700; letter-spacing: 1px;
  color: var(--term-green);
}
.termbar-brand span { color: var(--term-muted); font-size: 12px; }
.termbar-spacer { flex: 1; }
.termbar-stat {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--term-muted);
  padding: 4px 10px; border: 1px solid var(--term-line);
  border-radius: 4px;
}
.termbar-stat b { color: var(--term-text); font-weight: 500; }
.stat-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--term-muted); }
.stat-dot.on { background: var(--term-green); box-shadow: 0 0 8px var(--term-green); }
.stat-dot.off { background: var(--term-red); }

/* lang menu (kept minimal) */
.lang-menu { position: relative; }
.lang-trigger {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--term-muted);
  padding: 5px 10px; border: 1px solid var(--term-line); border-radius: 4px;
}
.lang-trigger::-webkit-details-marker { display: none; }
.lang-dropdown {
  position: absolute; right: 0; top: 110%;
  background: var(--term-panel-2); border: 1px solid var(--term-line-bright);
  border-radius: 6px; padding: 6px; min-width: 150px; z-index: 60;
}
.lang-option { display: flex; gap: 8px; padding: 8px 10px; border-radius: 4px; color: var(--term-text); }
.lang-option:hover, .lang-option.is-active { background: rgba(31,158,110,0.12); text-decoration: none; }

/* ---------- system readout strip ---------- */
.term-readout {
  display: flex; flex-wrap: wrap; gap: 0;
  border-bottom: 1px solid var(--term-line);
  background: var(--term-panel);
  font-size: 12px;
}
.term-readout .cell {
  padding: 8px 16px; border-right: 1px solid var(--term-line);
  display: flex; gap: 8px; align-items: baseline;
}
.term-readout .k { color: var(--term-muted); text-transform: uppercase; letter-spacing: 1px; font-size: 10px; }
.term-readout .v { color: var(--term-green); font-weight: 500; }
.term-readout .v.gold { color: var(--term-gold); }

/* ---------- console tab nav ---------- */
.term-tabs {
  display: flex; gap: 0; flex-wrap: wrap;
  border-bottom: 1px solid var(--term-line-bright);
  background: var(--term-bg);
  padding: 0 12px;
}
.term-tab {
  padding: 12px 18px; color: var(--term-muted);
  border-bottom: 2px solid transparent; text-decoration: none;
  font-size: 13px; letter-spacing: 0.5px; text-transform: uppercase;
  transition: color .15s, border-color .15s;
}
.term-tab:hover { color: var(--term-text); text-decoration: none; }
.term-tab.active { color: var(--term-green); border-bottom-color: var(--term-green); }
.term-tab .pfx { color: var(--term-gold); margin-right: 6px; opacity: 0.7; }

/* ---------- main console area ---------- */
.term-main {
  max-width: 1200px; margin: 0 auto; padding: 24px 20px 60px;
}
.term-block { margin-bottom: 26px; }
.term-block-head {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: var(--term-muted);
  text-transform: uppercase; letter-spacing: 1.5px;
  margin-bottom: 12px;
}
.term-block-head::before { content: "▸"; color: var(--term-gold); }
.term-block-head::after {
  content: ""; flex: 1; height: 1px; background: var(--term-line);
}

/* panels */
.term-panel {
  background: var(--term-panel);
  border: 1px solid var(--term-line);
  border-radius: 6px;
  padding: 20px;
}
.term-panel.glow { box-shadow: 0 0 0 1px var(--term-line), 0 0 30px rgba(31,158,110,0.06) inset; }

/* ---------- balance hero (terminal readout) ---------- */
.term-balance {
  background: var(--term-panel);
  border: 1px solid var(--term-line-bright);
  border-radius: 6px; padding: 24px 26px; margin-bottom: 24px;
  position: relative; overflow: hidden;
}
.term-balance::before {
  content: "BALANCE"; position: absolute; top: 12px; right: 16px;
  font-size: 10px; letter-spacing: 3px; color: var(--term-muted);
}
.term-balance .amt {
  font-size: clamp(36px, 6vw, 58px); font-weight: 500;
  color: var(--term-text); letter-spacing: -1px; line-height: 1;
}
.term-balance .amt .u { color: var(--term-green); font-size: 0.4em; margin-left: 10px; letter-spacing: 2px; }
.term-balance .meta {
  display: flex; gap: 20px; flex-wrap: wrap; margin-top: 14px;
  font-size: 12px; color: var(--term-muted);
}
.term-balance .meta .imm { color: var(--term-gold); }
.term-balance .cursor {
  display: inline-block; width: 10px; height: 1em; background: var(--term-green);
  margin-left: 4px; vertical-align: text-bottom; animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ---------- quick command buttons ---------- */
.term-cmds { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 26px; }
@media (max-width: 560px) { .term-cmds { grid-template-columns: 1fr; } }

/* ---------- buttons ---------- */
.btn, .term-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--mono); font-size: 13px; letter-spacing: 1px; text-transform: uppercase;
  padding: 13px 20px; border-radius: 5px; cursor: pointer; text-decoration: none;
  border: 1px solid var(--term-line-bright); background: var(--term-panel-2);
  color: var(--term-text); transition: all .15s;
}
.btn:hover, .term-btn:hover { border-color: var(--term-green); background: rgba(31,158,110,0.1); text-decoration: none; }
.btn-primary {
  background: rgba(31,158,110,0.14); border-color: var(--term-green); color: var(--term-green);
}
.btn-primary::before { content: "$ "; color: var(--term-gold); }
.btn-primary:hover { background: rgba(31,158,110,0.24); box-shadow: 0 0 16px rgba(31,158,110,0.2); }
.btn-ghost::before { content: "> "; color: var(--term-gold); }
.input-action-btn {
  padding: 8px 12px; font-size: 11px; border-radius: 4px;
  border: 1px solid var(--term-line-bright); background: var(--term-panel-2); color: var(--term-gold);
  cursor: pointer;
}

/* ---------- forms ---------- */
.form-stack, .send-form { display: flex; flex-direction: column; gap: 16px; }
.field-group { display: flex; flex-direction: column; gap: 6px; }
.field-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--term-muted);
}
.field-label::before { content: "├─ "; color: var(--term-line-bright); }
.field-input, select.field-input {
  width: 100%; background: var(--term-bg);
  border: 1px solid var(--term-line); border-radius: 4px;
  padding: 12px 14px; color: var(--term-text); font-family: var(--mono); font-size: 14px;
}
.field-input:focus {
  outline: none; border-color: var(--term-green);
  box-shadow: 0 0 0 2px rgba(31,158,110,0.15);
}
.field-input::placeholder { color: #3f5b52; }
.input-with-action { display: flex; gap: 8px; }
.input-with-action .field-input { flex: 1; }

/* password */
.password-input-wrap { position: relative; display: flex; }
.password-input-wrap .field-input { padding-right: 44px; }
.password-toggle-btn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--term-muted); cursor: pointer; }

/* ---------- fee / seed options ---------- */
.fee-options, .seed-options, .seed-length-group { display: flex; gap: 8px; flex-wrap: wrap; }
.fee-option, .seed-option {
  flex: 1 1 100px; position: relative; cursor: pointer;
  border: 1px solid var(--term-line); border-radius: 4px; padding: 12px;
  text-align: center; font-size: 12px; text-transform: uppercase; letter-spacing: 1px;
}
.fee-option:hover, .seed-option:hover { border-color: var(--term-green); }
.fee-radio, .seed-radio { position: absolute; opacity: 0; }
.fee-radio:checked + .fee-option, .fee-option.is-active,
.seed-radio:checked + .seed-option, .seed-option.is-active {
  border-color: var(--term-green); background: rgba(31,158,110,0.12); color: var(--term-green);
}
.fee-note, .note { color: var(--term-muted); font-size: 12px; }

/* seed box */
.seed-box {
  background: var(--term-bg); border: 1px dashed var(--term-line-bright);
  border-radius: 6px; padding: 20px; color: var(--term-gold);
  font-size: 15px; line-height: 2; word-spacing: 6px;
}

/* ---------- data rows (tx / address) ---------- */
.address-list { border: 1px solid var(--term-line); border-radius: 6px; overflow: hidden; }
.address-row, .tx-row {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 12px 16px; border-bottom: 1px solid var(--term-line);
  background: var(--term-panel);
}
.address-row:nth-child(even) { background: var(--term-panel-2); }
.address-row:last-child { border-bottom: none; }
.address-index { color: var(--term-gold); font-size: 12px; white-space: nowrap; }
.tx-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.address-value { color: var(--term-text); font-size: 13px; word-break: break-all; }
.tx-hash { color: var(--term-muted); font-size: 12px; }
.tx-dir-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 4px; flex-shrink: 0;
}
.tx-dir-sent { background: rgba(228,182,64,0.14); }
.tx-dir-received { background: rgba(37,200,136,0.14); }
.tx-dir-icon { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.tx-dir-sent .tx-dir-icon { stroke: var(--term-gold); }
.tx-dir-received .tx-dir-icon { stroke: var(--term-green); }
.tx-block-found { color: var(--term-green); }
.tx-immature { color: var(--term-gold); }

.wallet-recent-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.wallet-recent-title { font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--term-muted); margin: 0; }
.wallet-recent-title::before { content: "▸ "; color: var(--term-gold); }

/* tx search / pagination */
.tx-search-form { display: flex; gap: 8px; margin-bottom: 16px; }
.tx-summary-chip { display: inline-block; font-size: 12px; color: var(--term-gold); padding: 4px 10px; border: 1px solid var(--term-line); border-radius: 4px; margin-bottom: 14px; }
.tx-pagination { display: flex; gap: 6px; justify-content: center; margin-top: 16px; }
.tx-page-link { padding: 6px 12px; border: 1px solid var(--term-line); border-radius: 4px; color: var(--term-text); font-size: 12px; }
.tx-page-link.is-active, .tx-page-link:hover { border-color: var(--term-green); color: var(--term-green); text-decoration: none; }

/* ---------- receive / QR ---------- */
.receive-qr-box {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 26px; border: 1px solid var(--term-line-bright); border-radius: 6px;
  background: var(--term-panel); cursor: pointer;
}
.receive-qr-image { width: min(260px, 66vw); border-radius: 6px; border: 1px solid var(--term-line); }
.receive-address-inline { color: var(--term-gold); font-size: 13px; word-break: break-all; text-align: center; }

/* ---------- result / status boxes ---------- */
.result-box { border-radius: 6px; }
.ok-box { border: 1px solid rgba(37,200,136,0.4); }
.err-box { border: 1px solid rgba(255,92,92,0.45); background: rgba(255,92,92,0.06); color: #ffd0d0; padding: 14px 16px; }
.result-title { font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--term-muted); margin: 0 0 10px; }
.result-title::before { content: "// "; color: var(--term-gold); }
.confirm-send-box { border: 1px solid var(--term-line-bright); padding: 18px; margin-top: 16px; }
.confirm-send-actions { display: flex; gap: 10px; margin-top: 16px; }
.confirm-send-actions form { flex: 1; }
.confirm-send-actions .btn { width: 100%; }
.send-debug-box { border: 1px solid var(--term-line); padding: 14px; margin-top: 14px; font-size: 11px; color: var(--term-muted); }
.status-list { border: 1px solid var(--term-line); border-radius: 6px; overflow: hidden; }
.status-row { display: flex; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--term-line); }
.status-row:last-child { border-bottom: none; }
.status-ok, .is-ok, .is-online { color: var(--term-green); }
.status-err, .is-err, .is-offline, .status-error-text { color: var(--term-red); }

/* headings */
h1 { font-family: var(--mono); font-size: 20px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--term-green); margin: 0 0 6px; }
h1::before { content: "> "; color: var(--term-gold); }
.sub { color: var(--term-muted); font-size: 13px; margin-bottom: 20px; }
.send-title, .seed-title, .fee-title { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--term-text); }

/* toast */
.wallet-toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--term-panel-2); border: 1px solid var(--term-green);
  color: var(--term-green); padding: 12px 20px; border-radius: 5px;
  font-size: 13px; z-index: 200; box-shadow: 0 0 20px rgba(31,158,110,0.2);
}
.wallet-toast::before { content: "✓ "; }

/* modals */
.confirm-modal { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; padding: 20px; }
.confirm-modal[hidden] { display: none; }
.confirm-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.8); }
.confirm-modal__card { position: relative; z-index: 1; background: var(--term-panel); border: 1px solid var(--term-line-bright); border-radius: 8px; padding: 24px; max-width: 440px; width: 100%; }
.confirm-modal__title { font-size: 15px; text-transform: uppercase; letter-spacing: 1px; color: var(--term-green); margin: 0 0 12px; }
.confirm-modal__text { color: var(--term-muted); font-size: 13px; margin-bottom: 18px; }
.confirm-modal__actions { display: flex; gap: 10px; }
.confirm-modal__actions.single-col { flex-direction: column; }
.confirm-modal__btn { flex: 1; }
.confirm-modal__btn.is-danger { border-color: var(--term-red); color: var(--term-red); }
.confirm-modal__btn.is-danger:hover { background: rgba(255,92,92,0.12); }

/* info list */
.info-list { color: var(--term-muted); font-size: 13px; line-height: 1.8; padding-left: 18px; }
.info-trigger, .info-source-link { background: none; border: none; color: var(--term-green); cursor: pointer; font-family: inherit; font-size: 13px; text-decoration: underline; padding: 0; }

/* onboarding / landing centering */
.wrap { max-width: 620px; margin: 0 auto; padding: 60px 20px; }
.wrap .card, .card.panel { background: var(--term-panel); border: 1px solid var(--term-line-bright); border-radius: 8px; padding: 32px; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.actions .btn { flex: 1 1 180px; }
.sub-info-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.copyable { cursor: pointer; }
.copyable:hover { background: rgba(31,158,110,0.06); }
.is-copied { border-color: var(--term-green) !important; }

/* footer */
.site-footer { text-align: center; padding: 30px 20px; color: var(--term-muted); font-size: 12px; border-top: 1px solid var(--term-line); margin-top: 40px; }
.footer-link { color: var(--term-green); }

/* hide the old sidebar entirely if present */
.side-nav, .side-overlay, .nav-toggle { display: none !important; }
body.has-wallet-nav main { margin-left: 0 !important; }

/* responsive */
@media (max-width: 640px) {
  .term-readout { font-size: 11px; }
  .term-readout .cell { padding: 6px 12px; }
  .term-tab { padding: 10px 12px; font-size: 12px; }
  .confirm-send-actions { flex-direction: column; }
}

/* --- P2QR (Quantum) tab --- */
.pqr-badge{font-size:.6em;color:#E4B640;border:1px solid #E4B64066;padding:2px 8px;border-radius:3px;margin-left:10px;vertical-align:middle;letter-spacing:.05em}
.pqr-tab .pfx{color:#E4B640}
.pqr-panel{background:#0a1210;border:1px solid #1F9E6E44;border-radius:8px;padding:18px;margin:18px 0}
.pqr-row{display:flex;gap:14px;padding:8px 0;border-bottom:1px solid #1F9E6E1a;align-items:baseline}
.pqr-row:last-child{border-bottom:none}
.pqr-label{color:#25C888;font-size:.72rem;letter-spacing:.08em;min-width:130px;opacity:.85}
.pqr-balance{color:#E4B640;font-size:1.15rem;font-weight:600}
.pqr-mono-sm{font-size:.72rem;color:#7fbfa4;word-break:break-all}
.pqr-send-form{display:flex;flex-direction:column;gap:8px;margin:18px 0;max-width:640px}
.pqr-input{background:#05090a;color:#cfe9dd;border:1px solid #1F9E6E44;padding:11px;border-radius:5px;font-family:inherit;font-size:.9rem}
.pqr-input:focus{outline:none;border-color:#25C888;box-shadow:0 0 0 2px #25C88822}
.pqr-send-btn{background:#1F9E6E22;color:#25C888;border:1px solid #25C888;padding:13px;border-radius:5px;cursor:pointer;font-family:inherit;font-size:.92rem;letter-spacing:.04em;margin-top:6px;transition:background .15s}
.pqr-send-btn:hover{background:#1F9E6E44}
.pqr-status{background:#05090a;border:1px solid #1F9E6E44;border-radius:6px;padding:12px;color:#7fbfa4;font-size:.82rem;white-space:pre-wrap;word-break:break-all;margin-top:12px}

/* --- Help / Disclaimer page --- */
.help-warning{background:#2a1410;border:1px solid #E4564066;border-left:4px solid #E45640;border-radius:6px;padding:16px 18px;margin-bottom:24px}
.help-warning-title{color:#ff6b4a;font-weight:700;letter-spacing:.05em;margin-bottom:8px;font-size:.9rem}
.help-warning p{color:#e8c0b5;font-size:.85rem;margin:6px 0;line-height:1.55}
.help-warning a{color:#ff9678}
.help-section{margin:22px 0}
.help-section h2{color:#25C888;font-size:.82rem;letter-spacing:.08em;margin-bottom:10px;opacity:.9}
.help-section p{color:#cfe9dd;font-size:.88rem;line-height:1.6;margin:8px 0}
.help-list,.help-steps{margin:8px 0;padding-left:20px}
.help-list li,.help-steps li{color:#b8d8cc;font-size:.86rem;line-height:1.6;margin:7px 0}
.help-list li strong,.help-steps li strong{color:#e8f4ee}
.help-section .mono{font-family:inherit;color:#E4B640;background:#0a1210;padding:1px 5px;border-radius:3px;font-size:.9em}
.help-legal p{color:#8fb0a4;font-size:.8rem}
.help-links{margin-top:26px;padding-top:16px;border-top:1px solid #1F9E6E33;color:#7fbfa4;font-size:.85rem}
.help-links a{color:#25C888}