/* Name It — all rules scoped to .ni-app so the WordPress theme is untouched. */
.ni-app {
  --ni-bg: #f7f5ef;
  --ni-card: #ffffff;
  --ni-ink: #1f2a22;
  --ni-muted: #66706a;
  --ni-line: #e2ded3;
  --ni-accent: #2f5d43;
  --ni-accent-ink: #ffffff;
  --ni-cherry: #a3233a;
  --ni-right: #2e7d4f;
  --ni-right-bg: #e4f3ea;
  --ni-wrong: #b3261e;
  --ni-wrong-bg: #fbe7e5;
  --ni-close: #9a6a00;
  --ni-learning: #e0a526;
  --ni-new: #d9d4c7;
  --ni-field: #ffffff;
  --ni-radius: 14px;
  box-sizing: border-box;
  max-width: 720px;
  margin: 1.5em auto;
  padding: 16px;
  background: var(--ni-bg);
  color: var(--ni-ink);
  border-radius: 20px;
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Georgian", sans-serif;
  text-align: left;
}
@media (prefers-color-scheme: dark) {
  .ni-app {
    --ni-bg: #161a17; --ni-card: #1f2420; --ni-ink: #e8ebe6; --ni-muted: #9aa39c; --ni-line: #323a34;
    --ni-accent: #7fbf98; --ni-accent-ink: #10150f; --ni-cherry: #e0677c;
    --ni-right: #7fd19f; --ni-right-bg: #1d3326; --ni-wrong: #f08a80; --ni-wrong-bg: #3a1f1d; --ni-close: #e6be5c;
    --ni-learning: #d9a43a; --ni-new: #3a423c; --ni-field: #2a312c;
  }
}
.ni-app *, .ni-app *::before, .ni-app *::after { box-sizing: border-box; }
.ni-app button, .ni-app input, .ni-app select {
  font: inherit; color: inherit; letter-spacing: normal; text-transform: none; text-shadow: none; box-shadow: none;
  margin: 0; min-height: 0; line-height: 1.3;
}
.ni-app button { cursor: pointer; background: none; border: 0; padding: 0; border-radius: 0; width: auto; }
.ni-app button:disabled { cursor: default; opacity: .5; }
.ni-app img { max-width: 100%; height: auto; display: block; border: 0; border-radius: 0; box-shadow: none; margin: 0; }
.ni-app p { margin: 0; }
.ni-app h3 { margin: 0 0 4px; font-size: 1.05em; font-weight: 700; color: inherit; line-height: 1.3; letter-spacing: normal; text-transform: none; }
.ni-app a { color: var(--ni-accent); text-decoration: underline; text-underline-offset: 2px; }
.ni-app ol, .ni-app ul { margin: 0; padding: 0; list-style: none; }
.ni-app figure { margin: 0; }
.ni-app input[type=text], .ni-app input[type=url], .ni-app input[type=search], .ni-app select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--ni-line); border-radius: 10px; background: var(--ni-bg); height: auto; font-size: 16px;
}
.ni-app input:focus, .ni-app select:focus { outline: 2px solid var(--ni-accent); outline-offset: 1px; }
/* Themes often force their own input colours (e.g. black text); the app's colours must win so typing stays readable. */
.ni-app input[type=text], .ni-app input[type=url], .ni-app input[type=search], .ni-app select, .ni-app textarea {
  color: var(--ni-ink) !important;
  -webkit-text-fill-color: var(--ni-ink) !important;
  background-color: var(--ni-field) !important;
  caret-color: var(--ni-accent) !important;
  border-color: var(--ni-line);
  opacity: 1 !important;
  box-shadow: none !important;
}
.ni-app input::placeholder { color: var(--ni-muted) !important; -webkit-text-fill-color: var(--ni-muted) !important; opacity: 1 !important; }
.ni-app select option, .ni-app select optgroup { color: var(--ni-ink); background-color: var(--ni-card); }
.ni-app input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px var(--ni-field) inset !important; }
.ni-app input[type=text].is-right { background-color: var(--ni-right-bg) !important; border-color: var(--ni-right); }
.ni-app input[type=text].is-wrong { background-color: var(--ni-wrong-bg) !important; border-color: var(--ni-wrong); }

/* header */
.ni-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ni-title { font-weight: 800; font-size: 1.35em; letter-spacing: -0.02em; }
.ni-title::before { content: ""; display: inline-block; width: .6em; height: .6em; border-radius: 50%; background: var(--ni-cherry); margin-right: .45em; vertical-align: .08em; }
.ni-tabs { display: flex; gap: 4px; background: var(--ni-card); border: 1px solid var(--ni-line); border-radius: 999px; padding: 3px; }
.ni-app .ni-tab { padding: 6px 14px; border-radius: 999px; font-size: .92em; color: var(--ni-muted); }
.ni-app .ni-tab.is-active { background: var(--ni-accent); color: var(--ni-accent-ink); }
.ni-summary { color: var(--ni-muted); font-size: .86em; margin: 8px 2px 12px; }
.ni-summary b { color: var(--ni-ink); }
.ni-listname { color: var(--ni-ink); }

/* generic */
.ni-card { background: var(--ni-card); border: 1px solid var(--ni-line); border-radius: var(--ni-radius); padding: 14px; }
.ni-card + .ni-card { margin-top: 12px; }
.ni-muted { color: var(--ni-muted); }
.ni-small { font-size: .85em; }
.ni-it { font-style: italic; }
.ni-sci { font-weight: 600; }
.ni-app .ni-btn { background: var(--ni-accent); color: var(--ni-accent-ink); padding: 10px 18px; border-radius: 10px; font-weight: 600; white-space: nowrap; }
.ni-app .ni-btn-2 { background: transparent; color: var(--ni-accent); border: 1.5px solid var(--ni-accent); }
.ni-app .ni-link { color: var(--ni-accent); text-decoration: underline; text-underline-offset: 2px; font-size: .92em; white-space: nowrap; }
.ni-app .ni-danger { color: var(--ni-wrong); }
.ni-loading, .ni-error { background: var(--ni-card); border: 1px solid var(--ni-line); border-radius: var(--ni-radius); padding: 40px 16px; text-align: center; }
.ni-error p { margin-bottom: 14px; }
.ni-spinner { width: 28px; height: 28px; margin: 0 auto 12px; border: 3px solid var(--ni-line); border-top-color: var(--ni-accent); border-radius: 50%; animation: ni-spin .8s linear infinite; }
@keyframes ni-spin { to { transform: rotate(360deg); } }
.ni-inline { display: flex; gap: 8px; align-items: stretch; }
.ni-inline input { flex: 1; min-width: 0; }
.ni-app input.is-bad { border-color: var(--ni-wrong); }

/* setup */
.ni-setup p.ni-small { margin-bottom: 10px; }
.ni-recent { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 12px; font-size: .88em; }
.ni-app .ni-chip { border: 1px solid var(--ni-line); background: var(--ni-bg); border-radius: 999px; padding: 4px 12px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ni-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.ni-field { display: flex; flex-direction: column; gap: 4px; position: relative; font-size: .92em; }
.ni-field > span { color: var(--ni-muted); font-size: .85em; }
.ni-actions { display: flex; justify-content: flex-end; margin-top: 12px; }
.ni-suggest { position: absolute; z-index: 20; top: 100%; left: 0; right: 0; margin-top: 4px; background: var(--ni-card); border: 1px solid var(--ni-line); border-radius: 10px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.ni-suggest[hidden] { display: none; }
.ni-app .ni-suggest button { display: block; width: 100%; text-align: left; padding: 8px 12px; }
.ni-app .ni-suggest button:hover, .ni-app .ni-suggest button:focus { background: var(--ni-bg); }

/* progress */
.ni-progress { margin: 0 2px 10px; }
.ni-bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--ni-new); }
.ni-seg { display: block; flex-basis: 0; }
.ni-seg.is-learned, .ni-dot.is-learned { background: var(--ni-right); }
.ni-seg.is-learning, .ni-dot.is-learning { background: var(--ni-learning); }
.ni-seg.is-new, .ni-dot.is-new { background: var(--ni-new); }
.ni-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .8em; color: var(--ni-muted); margin-top: 6px; }
.ni-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: .05em; }
.ni-done { color: var(--ni-right); font-weight: 700; }

/* practice */
.ni-photo { margin-bottom: 12px; }
.ni-imgwrap { position: relative; background: #0f120f; border-radius: 10px; overflow: hidden; display: flex; justify-content: center; height: clamp(220px, 50vh, 500px); }
.ni-app .ni-imgwrap img { width: 100%; height: 100%; max-height: none; object-fit: contain; }
.ni-photo figcaption { font-size: .72em; color: var(--ni-muted); margin-top: 4px; }
.ni-app .ni-morephoto { position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.6); color: #fff; padding: 4px 10px; border-radius: 999px; font-size: .8em; }
.ni-app .ni-answer { font-size: 18px; padding: 12px 14px; }
.ni-app .ni-answer.is-right { border-color: var(--ni-right); background: var(--ni-right-bg); opacity: 1; }
.ni-app .ni-answer.is-wrong { border-color: var(--ni-wrong); background: var(--ni-wrong-bg); opacity: 1; }
.ni-tools { display: flex; gap: 16px; margin-top: 8px; }
.ni-hint { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .18em; font-size: 1.05em; margin-top: 8px; word-break: break-word; }
.ni-hint[hidden] { display: none; }
.ni-feedback:empty { display: none; }
.ni-feedback { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ni-line); display: flex; flex-direction: column; gap: 8px; }
.ni-verdict { font-weight: 600; }
.ni-verdict.is-right { color: var(--ni-right); }
.ni-verdict.is-wrong { color: var(--ni-wrong); }
.ni-verdict.is-close { color: var(--ni-close); }
.ni-verdict b { color: var(--ni-ink); }
.ni-verdict .ni-muted { font-weight: 400; }
.ni-names { font-size: .92em; }
.ni-crumbs { display: flex; flex-wrap: wrap; gap: 4px 6px; font-size: .85em; }
.ni-crumbs li { background: var(--ni-bg); border-radius: 8px; padding: 3px 8px; }
.ni-crumbs li.is-key { outline: 1.5px solid var(--ni-accent); }
.ni-rank { color: var(--ni-muted); font-size: .8em; text-transform: uppercase; letter-spacing: .04em; margin-right: 5px; }
.ni-app .ni-next { align-self: flex-end; }

/* list */
.ni-listhead { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.ni-listhead input { flex: 1; min-width: 0; }
.ni-warn { background: var(--ni-wrong-bg); border-radius: 10px; padding: 10px 12px; font-size: .9em; margin-bottom: 10px; }
.ni-rows { display: flex; flex-direction: column; }
.ni-app .ni-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 6px 4px; border-radius: 10px; }
.ni-app .ni-row:hover { background: var(--ni-bg); }
.ni-app .ni-row img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; flex: none; }
.ni-rowtext { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ni-rowlabel { font-weight: 600; }
.ni-boxes { display: flex; gap: 3px; flex: none; }
.ni-boxes i { width: 7px; height: 14px; border-radius: 2px; background: var(--ni-new); }
.ni-boxes i.on { background: var(--ni-right); }

/* modal */
.ni-app.ni-overlay { max-width: none; margin: 0; border-radius: 0; }
.ni-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 16px; }
.ni-modal { position: relative; background: var(--ni-card); color: var(--ni-ink); border-radius: var(--ni-radius); padding: 14px; width: 100%; max-width: 620px; max-height: 92vh; overflow: auto; display: flex; flex-direction: column; gap: 8px; }
.ni-app .ni-close { position: absolute; top: 6px; right: 10px; z-index: 2; font-size: 26px; line-height: 1; color: #fff; background: rgba(0,0,0,.55); width: 34px; height: 34px; border-radius: 50%; }

/* learn menu */
.ni-learnbar { display: flex; align-items: center; gap: 10px; margin: 0 2px 10px; }
.ni-app .ni-learnbar select { flex: 1; min-width: 0; max-width: 340px; font-weight: 600; background: var(--ni-card); }
.ni-field small { font-size: .78em; line-height: 1.35; }
.ni-note { background: var(--ni-bg); border-left: 3px solid var(--ni-learning); border-radius: 6px; padding: 6px 10px; font-size: .88em; margin-bottom: 8px; }
.ni-info { background: var(--ni-bg); border-radius: 10px; padding: 10px 12px; font-size: .88em; margin-bottom: 10px; color: var(--ni-muted); }
.ni-tag { display: inline-block; font-style: normal; font-weight: 400; font-size: .72em; color: var(--ni-muted); border: 1px solid var(--ni-line); border-radius: 999px; padding: 0 7px; margin-left: 6px; vertical-align: .1em; }
.ni-langs { display: flex; flex-direction: column; gap: 2px; font-size: .88em; }
.ni-langs li { display: flex; gap: 10px; padding: 3px 8px; border-radius: 6px; }
.ni-langs li.is-key { background: var(--ni-bg); outline: 1.5px solid var(--ni-accent); }
.ni-lang { flex: none; width: 92px; color: var(--ni-muted); }

/* photos: own, hidden, broken */
.ni-feedrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.ni-app .ni-hide { font-size: .85em; color: var(--ni-muted); }
.ni-tag.is-own { color: var(--ni-accent); border-color: var(--ni-accent); }
.ni-imgwrap.is-hidden img { opacity: .35; filter: grayscale(1); }
.ni-imgfail { color: #e8ebe6; align-self: center; text-align: center; padding: 20px; font-size: .9em; }
.ni-imgfail a { color: #9fd8b4; }

/* lists from the Drive folder */
.ni-pickers { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 2px 10px; }
.ni-pickers .ni-learnbar { margin: 0; flex: 1 1 260px; min-width: 0; }
.ni-pickers .ni-learnbar > span { flex: none; width: 3.2em; }
.ni-app .ni-pickers select { flex: 1; min-width: 0; max-width: none; font-weight: 600; }
.ni-listchips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.ni-app .ni-listchip { border: 1.5px solid var(--ni-line); background: var(--ni-bg); border-radius: 10px; padding: 8px 12px; text-align: left; font-size: .92em; }
.ni-app .ni-listchip:hover { border-color: var(--ni-accent); }
.ni-app .ni-listchip.is-active { border-color: var(--ni-accent); background: var(--ni-accent); color: var(--ni-accent-ink); }
.ni-app .ni-listchip.is-all { border-style: dashed; }
.ni-app .ni-listchip.is-builtin { font-weight: 700; }

/* full screen */
.ni-headright { display: flex; align-items: center; gap: 8px; }
.ni-app .ni-fullbtn { width: 38px; height: 38px; flex: none; border-radius: 50%; border: 1px solid var(--ni-line); background: var(--ni-card); color: var(--ni-muted); font-size: 18px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.ni-app .ni-fullbtn:hover { color: var(--ni-accent); border-color: var(--ni-accent); }
.ni-app .ni-fullbtn.is-active { background: var(--ni-accent); color: var(--ni-accent-ink); border-color: var(--ni-accent); }
.ni-app.is-full {
  position: fixed; inset: 0; z-index: 100000; /* above the WordPress admin bar (99999) */ max-width: none; width: 100%; height: 100%; margin: 0; border-radius: 0; overflow-y: auto;
  padding-top: max(16px, env(safe-area-inset-top, 0px)); padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px), calc((100% - 820px) / 2));
  padding-right: max(16px, env(safe-area-inset-right, 0px), calc((100% - 820px) / 2));
}
.ni-app.is-full:fullscreen { background: var(--ni-bg); }
.ni-app.is-full .ni-imgwrap { height: clamp(240px, 62vh, 900px); }
.ni-app.is-full .ni-foot { display: none; }
html.ni-noscroll, html.ni-noscroll body { overflow: hidden !important; }

/* Full-screen practice: everything fits on one screen, no scrolling. The photo takes whatever height is left. */
.ni-app.is-full[data-view="practice"] { display: flex; flex-direction: column; overflow: hidden; gap: 8px; padding-top: max(10px, env(safe-area-inset-top, 0px)); padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)); }
.ni-app.is-full[data-view="practice"] > * { flex: none; margin: 0; }
.ni-app.is-full[data-view="practice"] .ni-summary { display: none; }
.ni-app.is-full[data-view="practice"] .ni-main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.ni-app.is-full[data-view="practice"] .ni-main > * { flex: none; margin: 0; }
.ni-app.is-full[data-view="practice"] .ni-pickers { flex-wrap: nowrap; gap: 8px; }
.ni-app.is-full[data-view="practice"] .ni-pickers .ni-learnbar { flex: 1 1 0; }
.ni-app.is-full[data-view="practice"] .ni-pickers .ni-learnbar > span { display: none; }
.ni-app.is-full[data-view="practice"] .ni-pickers select { padding: 7px 10px; font-size: 15px; }
.ni-app.is-full[data-view="practice"] .ni-progress .ni-legend { margin-top: 4px; }
.ni-app.is-full[data-view="practice"] .ni-main > .ni-card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; padding: 10px; }
.ni-app.is-full[data-view="practice"] .ni-card > * { flex: none; }
.ni-app.is-full[data-view="practice"] .ni-photo { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin-bottom: 8px; }
.ni-app.is-full[data-view="practice"] .ni-imgwrap { flex: 1 1 auto; height: auto; min-height: 110px; }
.ni-app.is-full[data-view="practice"] .ni-photo figcaption { flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ni-app.is-full[data-view="practice"] .ni-tools { margin-top: 6px; }
.ni-app.is-full[data-view="practice"] .ni-hint { margin-top: 4px; }
.ni-app.is-full[data-view="practice"] .ni-note { margin-bottom: 6px; padding: 4px 8px; }
.ni-app.is-full[data-view="practice"] .ni-feedback { margin-top: 8px; padding-top: 8px; gap: 6px; }
.ni-app.is-full[data-view="practice"] .ni-crumbs { flex-wrap: nowrap; overflow: hidden; }
.ni-app.is-full[data-view="practice"] .ni-crumbs li { white-space: nowrap; }
@media (max-width: 560px) {
  .ni-app.is-full[data-view="practice"] .ni-title { display: none; }
  .ni-app.is-full[data-view="practice"] .ni-head { justify-content: flex-end; }
  .ni-app.is-full[data-view="practice"] .ni-progress .ni-legend { display: none; }
  .ni-app.is-full[data-view="practice"] .ni-names { font-size: .85em; }
}
@media (max-height: 560px) {
  .ni-app.is-full[data-view="practice"] .ni-progress .ni-legend { display: none; }
  .ni-app.is-full[data-view="practice"] .ni-crumbs { display: none; }
}
.ni-app.is-full .ni-overlay, .ni-overlay { z-index: 100001; }

.ni-foot { font-size: .75em; color: var(--ni-muted); margin-top: 12px; text-align: center; }

@media (max-width: 560px) {
  .ni-app { padding: 12px; margin: 1em auto; border-radius: 16px; }
  .ni-app .ni-card { padding: 10px; }
  .ni-imgwrap { height: clamp(200px, 42vh, 380px); }
}