/* Apple-style dark UI: true black background, iOS grouped card,
   SF system font, hairline separators, iOS blue accent.
   The currency board itself is a <canvas> (see app.js). */
* { box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  background: #000; color: #fff; margin: 0;
  display: flex; justify-content: center; padding: 24px 16px 48px;
  -webkit-font-smoothing: antialiased;
}
.card { width: min(560px, 100%); }
header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin: 8px 0; }
.sub { color: #98989f; font-size: 15px; margin: 0 0 20px; }

#langSelect {
  background: #1c1c1e; color: #fff; border: 1px solid #38383a; border-radius: 10px;
  padding: 8px 10px; font-size: 15px; flex: none;
}

/* Canvas board. touch-action:none is what locks page scrolling for any
   gesture that starts on the board. */
.canvas-wrap { position: relative; border-radius: 20px; overflow: hidden; background: #1c1c1e; }
#board { display: block; width: 100%; touch-action: none; }
/* Editing state: red, larger and bolder than the resting value
   (canvas draws the resting value white, 20px, weight 500). */
.editor {
  position: absolute; right: 10px; width: 55%; height: 46px;
  background: transparent; border: none; outline: none;
  color: #ff3b30; caret-color: #ff3b30;
  font-size: 26px; font-weight: 700; text-align: right;
  font-variant-numeric: tabular-nums; font-family: inherit;
}
.editor.hidden { display: none; }
.hintbar { color: #636366; font-size: 12px; text-align: center; margin: 10px 0 0; }

/* flags in the picker */
.flag { width: 40px; height: 40px; border-radius: 50%; flex: none; object-fit: cover;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); background: #2c2c2e; }
.flag-badge {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 700; color: #fff; background: #48484a;
}

.actions { display: flex; gap: 10px; margin-top: 16px; }
.actions button {
  flex: 1; padding: 13px; border-radius: 14px; border: none; font-size: 16px; font-weight: 600;
  background: #1c1c1e; color: #0a84ff; cursor: pointer;
}
.actions button.primary { background: #0a84ff; color: #fff; }
.actions button:active { opacity: .7; }

.updated { color: #636366; font-size: 12px; text-align: center; margin-top: 18px; line-height: 1.5; }
.error { color: #ff453a; font-size: 14px; text-align: center; }

/* Add-currency picker: bottom-sheet style panel with a flag grid */
.picker { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: flex-end; justify-content: center; z-index: 10; }
.picker.hidden { display: none; }
.picker-sheet {
  background: #1c1c1e; width: min(560px, 100%); max-height: 78vh; overflow-y: auto;
  border-radius: 20px 20px 0 0; padding: 18px 18px 28px;
}
.picker-head { display: flex; justify-content: space-between; align-items: center; }
.picker-head h2 { font-size: 20px; margin: 0; }
.close { width: 30px; height: 30px; border-radius: 50%; border: none; background: #2c2c2e; color: #98989f; cursor: pointer; }
#pickerSearch {
  width: 100%; margin: 14px 0 6px; padding: 11px 13px; font-size: 16px;
  background: #2c2c2e; border: none; border-radius: 10px; color: #fff; outline: none;
}
.picker-note { color: #ff9f0a; font-size: 13px; min-height: 16px; margin: 4px 0; }
.picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 6px; }
.pick-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: none; cursor: pointer;
  background: transparent; color: #fff; border-radius: 12px; text-align: left; font-size: 15px;
}
.pick-item:hover, .pick-item:active { background: #2c2c2e; }
.pick-item .flag, .pick-item .flag-badge { width: 32px; height: 32px; font-size: 14px; }
.pick-item .pname { color: #98989f; font-size: 12px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 96px; }