:root {
  --bg: #1e1e1e;
  --bg2: #2d2d2d;
  --fg: #ffffff;
  --accent: #2f7bd9;
  --accent2: #e74c3c;
  --btn: #3d3d3d;
  --btn-hover: #4d4d4d;
  --input-bg: #252525;
  --input-fg: #ffffff;
  --result-bg: #000000;
  --result-fg: #ffffff;
}

body {
  margin: 0;
  font-family: "SegoeLike", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--fg);
  display: flex;
  justify-content: center;
  padding: 20px;
  min-height: 100vh;
}

body.light {
  --bg: #f5f5f5;
  --bg2: #ffffff;
  --fg: #000000;
  --btn: #e6e6e6;
  --btn-hover: #d6d6d6;
  --input-bg: #ffffff;
  --input-fg: #000000;
  --result-bg: #ffffff;
  --result-fg: #000000;
}

.app {
  width: 100%;
  max-width: 420px;
  margin-top: 60px; /* Espaço para o menu não cobrir o título */
  box-sizing: border-box;
}

.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.title { font-weight: 700; font-size: 16px; letter-spacing: 1px; }

.subtitle-app { margin-bottom: 12px; text-align: center; }
.subtitle-text { font-size: 12px; color: #bdbdbd; }

.theme-btn { background: none; border: none; color: var(--fg); font-size: 18px; cursor: pointer; }

.input-field {
  width: 100%; box-sizing: border-box; padding: 12px;
  font-family: "ConsolasLike", monospace; font-size: 18px;
  background: var(--input-bg); color: var(--input-fg);
  border: 0; border-radius: 8px; outline: none; margin-bottom: 10px;
}

.result-field {
  width: 100%; box-sizing: border-box; padding: 10px;
  font-family: "ConsolasLike", monospace; font-size: 14px;
  font-weight: 700; background: var(--result-bg); color: var(--result-fg);
  border: 0; border-radius: 8px; margin-bottom: 12px;
}

.controls-row { display: flex; gap: 8px; margin-bottom: 12px; }
.ctrl-btn { flex: 1; padding: 10px; background: var(--btn); color: var(--fg); border: 0; border-radius: 6px; cursor: pointer; font-size: 13px; }
.anon-btn { width: 60px; background: var(--btn); border: 0; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; }

.keyboard { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.keyboard .key { background: var(--btn); color: var(--fg); padding: 15px 0; text-align: center; font-size: 18px; border-radius: 6px; cursor: pointer; }

.ops-row { display: flex; justify-content: center; gap: 20px; margin-bottom: 16px; }
.op-a, .op-b { width: 140px; height: 50px; border: 0; border-radius: 8px; font-size: 18px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; color: white; }
.op-a { background: var(--accent); }
.op-b { background: var(--accent2); }

.translate-btn { width: 100%; background: var(--accent); color: white; padding: 14px; border: 0; border-radius: 8px; font-size: 16px; font-weight: 700; cursor: pointer; }

@media (max-width: 440px) {
  .keyboard .key { padding: 20px 0; font-size: 22px; }
}