:root {
  --bg: #f4f7fb;
  --card: #ffffff;
  --ink: #0e2a4a;
  --muted: #5a6f87;
  --accent: #1e5cff;
  --accent-2: #0d3fcc;
  --ok: #0a9e5f;
  --warn: #d9480f;
  --border: #d6dde8;
  --radius: 14px;
  --shadow: 0 2px 10px rgba(14,42,74,.07);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1623;
    --card: #182538;
    --ink: #e8eef7;
    --muted: #93a3b8;
    --accent: #4e86ff;
    --accent-2: #1e5cff;
    --border: #27374d;
    --shadow: 0 2px 12px rgba(0,0,0,.4);
  }
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  background: var(--bg); color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  min-height: 100vh; padding: 14px 14px 60px;
}
.hdr { margin-bottom: 14px; }
.brand { display:flex; align-items:center; gap:12px; }
.brand .logo {
  width:46px; height:46px; border-radius:12px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff; font-size:24px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow);
}
.brand h1 { margin:0; font-size:20px; }
.brand .sub { margin:0; font-size:13px; color: var(--muted); }

.screen { display:none; }
.screen.active { display:block; }

.grid {
  display:grid; grid-template-columns: 1fr 1fr; gap:10px;
}
.tile {
  background: var(--card); border:1px solid var(--border);
  border-radius: var(--radius); padding:14px;
  display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  text-align:left; color:var(--ink); cursor:pointer;
  box-shadow: var(--shadow); transition: transform .08s ease;
}
.tile:active { transform: scale(.98); }
.tile .emo { font-size:24px; }
.tile .t { font-weight:600; font-size:15px; }
.tile .d { font-size:12px; color:var(--muted); }
.tile.wide { grid-column: span 2; }
.tile.ghost { background: transparent; box-shadow:none; }

.footer-note { color:var(--muted); font-size:12px; text-align:center; margin:16px 2px 0; }

.back {
  background:none; border:none; color:var(--accent);
  font-size:15px; padding:4px 0 10px; cursor:pointer;
}
h2 { margin:4px 0 12px; font-size:19px; }

form { display:flex; flex-direction:column; gap:10px; }
.field { display:flex; flex-direction:column; gap:4px; }
.field label { font-size:13px; color:var(--muted); }
.field input, .field select {
  background: var(--card); color: var(--ink);
  border:1px solid var(--border); border-radius:10px;
  padding:12px; font-size:16px; width:100%;
}
.field input:focus, .field select:focus { outline:2px solid var(--accent); border-color: var(--accent); }
button.go {
  margin-top:4px; background: var(--accent); color:#fff; border:none;
  border-radius:12px; padding:14px; font-size:16px; font-weight:600;
  cursor:pointer;
}
button.go:active { background: var(--accent-2); }

.result {
  margin-top:14px; background: var(--card); border:1px solid var(--border);
  border-radius: var(--radius); padding:14px; box-shadow: var(--shadow);
}
.result.hidden { display:none; }
.result h3 { margin:0 0 8px; font-size:15px; color:var(--muted); font-weight:500; }
.result .big { font-size:28px; font-weight:700; color: var(--accent-2); }
.result ul { list-style:none; padding:0; margin:10px 0 0; }
.result ul li { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px dashed var(--border); font-size:14px; }
.result ul li:last-child { border-bottom:none; }

.hist { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.hist li {
  background: var(--card); border:1px solid var(--border);
  border-radius:10px; padding:10px 12px; font-size:13px;
}
.hist .tool { font-weight:600; color:var(--accent-2); }
.hist .ts { color:var(--muted); font-size:11px; margin-top:2px; }
.hist .empty { text-align:center; color:var(--muted); padding:20px 0; }