:root {
  --bg-primary: #0a0a0f;
  --bg-secondary: #14141f;
  --bg-tertiary: #1e1e2e;
  --text-primary: #ffffff;
  --text-secondary: #a0a0b0;
  --text-muted: #606070;
  --accent: #00d4ff;
  --accent-secondary: #00ff88;
  --danger: #ff4466;
  --focus-ring: #00d4ff;
  --focus-glow: rgba(0, 212, 255, 0.4);
  --radius-md: 12px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  width: 600px; height: 600px; overflow: hidden;
  background: #000;
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
#app { width: 100%; height: 100%; position: relative; }
.screen { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: flex; flex-direction: column; }
.screen.hidden { display: none; }
.focusable { transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease, background 0.12s ease; border: 2px solid transparent; cursor: pointer; outline: none; }
.focusable:focus { border-color: var(--focus-ring); box-shadow: 0 0 20px var(--focus-glow); }
.hidden { display: none !important; }
.mono { font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace; }

/* ---------- Headers ---------- */
.hdr { padding: 22px 26px 14px; }
.title { font-size: 34px; font-weight: 700; letter-spacing: 0.3px; }
.title .hash-sign { color: var(--accent); }
.subtitle { margin-top: 6px; font-size: 16px; color: var(--text-secondary); letter-spacing: 0.4px; }

.hdr-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px; background: var(--bg-secondary);
  border-bottom: 1px solid #262633;
}
.hdr-back { font-size: 16px; color: var(--text-secondary); min-width: 60px; }
.hdr-title { font-size: 22px; font-weight: 600; }
.hdr-len { font-size: 16px; color: var(--accent); min-width: 60px; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Home menu ---------- */
.menu { flex: 1; display: flex; flex-direction: column; gap: 16px; padding: 10px 26px; justify-content: center; }
.menu-item {
  display: flex; align-items: center; gap: 18px;
  background: var(--bg-secondary); border-radius: var(--radius-md);
  padding: 0 22px; min-height: 96px; text-align: left; color: var(--text-primary);
}
.menu-item:focus { background: var(--bg-tertiary); transform: scale(1.015); }
.mi-icon {
  font-size: 30px; color: var(--accent);
  width: 54px; height: 54px; flex: 0 0 54px;
  display: flex; align-items: center; justify-content: center;
  background: #0d1a22; border-radius: 12px;
}
.mi-text { display: flex; flex-direction: column; gap: 4px; }
.mi-label { font-size: 22px; font-weight: 600; }
.mi-sub { font-size: 15px; color: var(--text-secondary); }
.foot { padding: 16px 26px 22px; font-size: 14px; color: var(--text-muted); text-align: center; }

/* ---------- Input preview ---------- */
.preview {
  margin: 14px 22px; padding: 16px 18px; min-height: 76px;
  background: var(--bg-secondary); border-radius: var(--radius-md);
  border: 1px solid #262633;
  display: flex; align-items: center; flex-wrap: wrap;
  font-size: 22px; line-height: 1.3; word-break: break-all; overflow: hidden;
}
.preview-text { color: var(--text-primary); }
.preview-text:empty::before { content: 'Type something\2026'; color: var(--text-muted); }
.preview-caret { color: var(--accent); animation: blink 1.05s steps(2, start) infinite; margin-left: 1px; }
@keyframes blink { to { opacity: 0; } }

/* ---------- Keyboard ---------- */
.keyboard {
  flex: 1; display: flex; flex-direction: column; gap: 8px;
  padding: 6px 12px 16px; justify-content: center;
}
.kb-row { display: flex; gap: 7px; justify-content: center; }
.key {
  flex: 1 1 0; min-width: 0; height: 56px; max-width: 64px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-tertiary); border-radius: 9px;
  color: var(--text-primary); font-size: 22px; font-weight: 500;
  user-select: none;
}
.key:focus { background: #2a2a3f; transform: scale(1.08); z-index: 2; }
.key-wide { flex: 2.4 1 0; max-width: none; }
.key-fn { background: var(--bg-secondary); color: var(--text-secondary); font-size: 16px; font-weight: 600; max-width: 88px; }
.key-fn.active { color: var(--accent); border-color: var(--accent); }
.key-gen { background: linear-gradient(180deg, #00d4ff, #0094cc); color: #001016; font-weight: 700; font-size: 17px; flex: 2 1 0; max-width: none; }
.key-gen:focus { background: linear-gradient(180deg, #2ee0ff, #00b0e6); }
.key-danger { color: var(--danger); }

/* ---------- Results ---------- */
.res-body { flex: 1; padding: 14px 18px 6px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.res-input {
  background: var(--bg-secondary); border-radius: 10px; padding: 12px 16px;
  display: flex; flex-direction: column; gap: 3px;
}
.res-input-label { font-size: 13px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
.res-input-text { font-size: 18px; color: var(--text-primary); word-break: break-all; max-height: 60px; overflow: hidden; }
.hash-card { background: var(--bg-secondary); border-radius: var(--radius-md); padding: 14px 16px; }
.hash-card:focus { background: var(--bg-tertiary); }
.hash-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.hash-label { font-size: 19px; font-weight: 700; color: var(--accent); }
.hash-bits { font-size: 13px; color: var(--text-muted); }
.hash-value { font-size: 18px; line-height: 1.45; letter-spacing: 0.5px; word-break: break-all; color: var(--text-primary); }
.hash-hint { margin-top: 8px; font-size: 13px; color: var(--text-muted); }

/* ---------- Actions row ---------- */
.actions { display: flex; gap: 12px; padding: 12px 18px 18px; }
.act {
  flex: 1; min-height: 72px; border-radius: var(--radius-md);
  background: var(--bg-tertiary); color: var(--text-primary);
  font-size: 18px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.act:focus { background: #2a2a3f; transform: scale(1.03); }
.act-primary { background: #0d2e2a; color: var(--accent-secondary); }
.act-primary:focus { background: #114039; }
.act-danger { color: var(--danger); }

/* ---------- History ---------- */
.hist-list { flex: 1; padding: 14px 18px 6px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.hist-item {
  background: var(--bg-secondary); border-radius: 10px; padding: 12px 16px;
  display: flex; flex-direction: column; gap: 4px; text-align: left; color: var(--text-primary);
}
.hist-item:focus { background: var(--bg-tertiary); }
.hist-text { font-size: 18px; font-weight: 600; word-break: break-all; }
.hist-meta { font-size: 13px; color: var(--text-muted); }
.hist-md5 { font-size: 13px; color: var(--text-secondary); word-break: break-all; }
.hist-empty { color: var(--text-muted); font-size: 18px; text-align: center; padding: 60px 20px; line-height: 1.5; }

/* ---------- About ---------- */
.about-body { flex: 1; padding: 22px 26px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; }
.about-line { font-size: 18px; line-height: 1.5; color: var(--text-primary); }
.about-line b { color: var(--accent); }
.about-muted { color: var(--text-secondary); font-size: 16px; }
.about-body .act { margin-top: auto; }

/* ---------- Toast ---------- */
.toast {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  background: var(--bg-tertiary); border: 1px solid var(--accent);
  color: var(--text-primary); padding: 14px 26px; border-radius: 24px;
  font-size: 17px; font-weight: 600; box-shadow: 0 0 24px rgba(0,212,255,0.35);
  z-index: 50; max-width: 520px; text-align: center;
}
.toast.err { border-color: var(--danger); box-shadow: 0 0 24px rgba(255,68,102,0.35); }