:root {
  --bg: #1a1f2e;
  --text: #f5f5f5;
  --muted: rgba(255,255,255,0.7);
  --accent: #ffd166;
  --danger: #ff6b6b;
  --panel: rgba(255,255,255,0.06);
  --panel-border: rgba(255,255,255,0.12);
  --row-bg: rgba(255,255,255,0.05);
  --row-bg-hover: rgba(255,255,255,0.09);
  --btn-bg: rgba(255,255,255,0.12);
  --btn-bg-hover: rgba(255,255,255,0.22);
}
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: linear-gradient(135deg, #1a1f2e 0%, #2c3e50 100%);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  min-height: 100vh;
}
/* Mirrors settings.css: only `body` is the flex container so html's
   align-items doesn't shrink body to its intrinsic width on phones. */
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px;
}
@media (min-width: 481px) {
  html:not(.compact) body { min-width: 592px; }
}

header {
  text-align: center;
  margin-bottom: 24px;
  max-width: 560px;
  width: 100%;
  position: relative;
}
.back-arrow {
  position: absolute;
  top: 0;
  left: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.back-arrow:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.25);
  transform: translateX(-2px);
}
.back-arrow svg { width: 18px; height: 18px; }
@media (max-width: 480px) {
  .back-arrow { width: 34px; height: 34px; }
}
h1 {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 6px;
}
.panel {
  width: 100%;
  max-width: 560px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 18px;
}

/* Add-new tile pinned at the top of the list. */
.add-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px dashed rgba(255,255,255,0.25);
  color: var(--text);
  padding: 14px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  margin-bottom: 12px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.add-row:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.4);
}
.add-row.hidden { display: none; }
.add-icon { width: 18px; height: 18px; flex-shrink: 0; }

.card-list { display: flex; flex-direction: column; gap: 8px; }

.card-row {
  display: flex;
  align-items: stretch;
  background: var(--row-bg);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  overflow: hidden;
  transition: background 0.12s ease;
}
.card-row:hover { background: var(--row-bg-hover); }
.card-row-text {
  flex: 1;
  padding: 12px 14px;
  min-width: 0;        /* let long text ellipsize instead of overflowing the row */
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.card-row-source {
  font-size: 16px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-row-english {
  font-size: 13px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-row-meta {
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted);
}
.card-row-category {
  display: inline-block;
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
  padding: 1px 6px;
}
.row-menu-btn {
  align-self: center;
  margin-right: 6px;
}

/* The row-level overflow menu (Delete). Anchored above the row's menu button. */
.row-menu {
  position: absolute;
  background: #2a3242;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
  padding: 4px;
  z-index: 10;
  min-width: 140px;
}
.row-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--text);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
}
.row-menu-item:hover { background: rgba(255,255,255,0.1); }
.row-menu-item.danger { color: var(--danger); }

/* Inline form — either expanded from the "Add" tile or replacing a row. */
.form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  font-weight: 600;
}
.field-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.text-input,
.select-input {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
  padding: 10px 12px;
  min-width: 0;        /* so input can shrink inside flex parent */
}
.text-input:focus,
.select-input:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255,255,255,0.1);
}
.select-input { cursor: pointer; }
/* Give the option list a solid fill — without it the native popup falls back to
   the OS menu's translucent background and card content bleeds through behind it. */
.select-input option {
  background: var(--bg);
  color: var(--text);
}
.new-category-input { margin-top: -4px; }

.icon-btn {
  background: var(--btn-bg);
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--text);
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease;
}
.icon-btn:hover { background: var(--btn-bg-hover); }
.icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.icon-btn svg { width: 18px; height: 18px; }
.tts-btn.playing { color: var(--accent); }

.form-error {
  font-size: 12px;
  color: var(--danger);
  background: rgba(255,107,107,0.08);
  border: 1px solid rgba(255,107,107,0.3);
  border-radius: 6px;
  padding: 8px 10px;
}

/* Collapsible "see other options" panel rendered under a field after Translate. */
.alternatives {
  margin-top: 6px;
  font-size: 13px;
}
.alternatives > summary {
  color: var(--muted);
  cursor: pointer;
  padding: 4px 0;
  list-style: none;
  user-select: none;
}
.alternatives > summary::-webkit-details-marker { display: none; }
.alternatives > summary::before {
  content: "▸ ";
  display: inline-block;
  transition: transform 0.15s ease;
}
.alternatives[open] > summary::before { content: "▾ "; }
.alternatives > summary:hover { color: var(--text); }
.alternative-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text);
  border-radius: 6px;
  padding: 8px 10px;
  margin-top: 4px;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: background 0.12s ease;
}
.alternative-item:hover { background: rgba(255,255,255,0.1); }
.alternative-text { flex: 1; min-width: 0; }
.alternative-source {
  font-size: 11px;
  color: var(--muted);
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
  padding: 1px 6px;
  flex-shrink: 0;
}

.translate-row {
  display: flex;
  /* Center the Translate button between the text fields above and the Category
     dropdown below — emphasizes its "convert between the two fields" role. */
  justify-content: center;
}
.form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.form-actions-right {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
.btn {
  background: var(--btn-bg);
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--text);
  padding: 9px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s ease;
}
.btn:hover { background: var(--btn-bg-hover); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn.primary {
  background: var(--accent);
  color: #1a1f2e;
  border-color: var(--accent);
}
.btn.primary:hover { background: #ffdd85; }
.btn.primary:disabled { background: var(--accent); }
.btn svg { width: 16px; height: 16px; }
.translate-btn.loading { opacity: 0.6; cursor: progress; }

.empty-state {
  text-align: center;
  color: var(--muted);
  padding: 24px 8px;
  font-size: 14px;
}
.empty-state p { margin: 4px 0; }
.empty-hint { font-size: 13px; }

.nav {
  width: 100%;
  max-width: 560px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}
.nav a {
  color: var(--accent);
  text-decoration: none;
  font-size: 13px;
  border-bottom: 1px dashed transparent;
  transition: border-color 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.nav a:hover { border-bottom-color: var(--accent); }
.back-arrow-icon { width: 16px; height: 16px; flex-shrink: 0; }
.save-status {
  color: var(--muted);
  font-size: 12px;
  font-style: italic;
  transition: opacity 0.4s ease;
  opacity: 0;
}
.save-status.visible { opacity: 1; }

/* Native (Capacitor): respect safe-area insets so the header doesn't sit under
   the status bar / notch and the bottom controls clear the home indicator.
   Mirrors settings.css / memory.css / app.css. */
html.native body {
  padding: max(env(safe-area-inset-top), 24px)
           max(env(safe-area-inset-right), 16px)
           max(env(safe-area-inset-bottom), 24px)
           max(env(safe-area-inset-left), 16px);
}

/* ---------- tablet (native shell only) ----------
   Same gate and scoping as the block at the end of app.css - see the long comment
   there for why `min-width: 700px` (above the widest iPhone portrait viewport at
   440pt, below the iPad mini's 744pt), why `min-height: 600px` (a width-only gate
   also matches an iPhone in landscape, which is 852-956px wide but at most 440px
   tall; the shortest iPad viewport in either orientation is 744px), and why
   `html.compact` (set only by the native shell and mobile-web phones - here in
   custom_cards.js init() - so the desktop site at swedishflashcards.app, built from
   this same stylesheet, is untouched).

   Width only, and no vertical centring, unlike app.css. This page is a list whose
   height changes on every interaction: rows are added and deleted, the empty state
   collapses, and the inline form expands in place of a row. `justify-content: center`
   would re-centre the whole column on each of those, making the header and the row
   being edited jump; and once the list overflows the viewport `safe center` falls
   back to flex-start anyway, so short and long lists would align differently. A
   top-anchored list with space below it is the correct shape here.

   720px matches app.css so the column width doesn't jump when navigating between the
   flashcards page and this one. It is a cap, not a floor: these three elements are
   already width:100%, so on an iPad mini portrait (744px wide, 712px content box)
   they stay at 712px and nothing overflows horizontally. */
@media (min-width: 700px) and (min-height: 600px) {
  html.compact header,
  html.compact .panel,
  html.compact .nav {
    max-width: 720px;
  }
}