/* ============================================================
   Theme tokens — dark is the default (per user preference); a
   light override activates via [data-theme="light"] on <html>.
   No system-preference auto-detection: the toggle is explicit
   and the choice is remembered, dark until the user picks light.
   ============================================================ */
:root {
  --bg: #17171c;
  --panel: #212127;
  --panel-2: #1a1a20;
  --input-bg: #1a1a20;
  --border: #34343d;
  --border-strong: #45454f;
  --text: #eef0f2;
  --muted: #9798a6;
  --accent: #6bbf59;
  --accent-dark: #57a446;
  --accent-contrast: #0d1f08;
  --accent-soft: rgba(107, 191, 89, 0.14);
  --warn: #e0a548;
  --warn-soft: rgba(224, 165, 72, 0.13);
  --danger: #e2685f;
  --danger-soft: rgba(226, 104, 95, 0.13);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 14px rgba(0, 0, 0, 0.2);
  --radius: 8px;
  --radius-lg: 10px;
  --icon-size-lg: 52px;
  --icon-size-md: 44px;
  --icon-size-sm: 40px;
  --icon-size-xs: 34px;
  --icon-size-candidate: 44px;

  /* Real item textures used both as the OS-level custom cursor (below)
     and, unscaled, as the click-feedback swing sprite (§ animations au
     clic) — kept as variables so the ~500-char base64 payload isn't
     duplicated between the two uses. */
  --cursor-icon-sword: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAA7EAAAOxAGVKw4bAAABX0lEQVRYheXWsS8DURzA8e+JUBEW0YgIIgSxWHQwII006V6x6mCpf4C/QOIPMElsFlaRiKCL4SaLRFKDGkR0KYvW4HVof5p77Wk0vd47vuO9l1x+n7y8O6t/OaKo03vatuo9b3Ud7XjJT3V+Pr8CcHB/61hIRWMKvJfwX0B/sGtfALB/eQ54L+G7wPdUoalxBdWzIBI7kVUAUtEY0HoJcwQkkZi7OQag8JAFvJMwT0Bql4S5ApKbRGhyDIBMYgtwl9C/Nfo+8wWk30rI5N2V9WJlf3AFJF0id3gCwGAyAcDd4hoA4c11APKnV4D7GQmegKRLPG3vAdAzPeHY93cFJJHoGg4DjU+9XnAF9Mkl+cfcmP0CIPvyAcCZnTPzDNT8EzZKn1wmlgqZRwvgutirAJLxEVlSUCvhu0DTN6EkE7s1M1qWWJkfAODobcixHjyBZhO5vqUFoHpP/D8BPd8FSi8Jl4YACyuSAAAAAElFTkSuQmCC");
  --cursor-icon-pickaxe: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAA7EAAAOxAGVKw4bAAABQ0lEQVRYhe2VMUsCYRjHf4aIITQkNkSeRQmNTa61StDkF2hTFCSEhj5AONhXMOhLuNbQ4tIquGQ0BIKDEDoIr0M9XHd13Hvcxb2Uv+3uHl7u+b3/931gxX8noVu4cVxSOnXTh772mgBrQYp/g29/Wz2zFMDobQbA4/oeAPn2JQCL8cRRn8xtApA+KAAwrNQBfRPmGTi0MgrgvLwDQPe05fg+al3/uFBqewv4CxlIF3cVQOHmCrD32GrWAOj1x4E69MMcA9L5/l0HsNOeaFwAcHKUBezTEZWJ2A0k3S+kc0n7/OVdOnWcDnkOa8I8A14MPk3c9l4V2Jkol3KhTJhnQM69F4OIM2GeAZlqfkSVidgNeM6C+fA50F66p+j908d94mfCPANhERO6syN2A9o3oS5B74nYDUSeATeSCeGLIcAAAyuWnG5z99ZKNFUAAAAASUVORK5CYII=");
  --cursor-icon-axe: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAA7EAAAOxAGVKw4bAAABUklEQVRYhe2Wu0oDQRRAj2JhESQKoghifDRLttCgXQJWIlaSL/AL7RSx8gGCVaIsiBKNIWAUHwRJYSNjsdzoxqw7uxsYN3qqnZ0HM+feuQz8dQZ0B25Yq+pre/fiQHvuTwz2YpE4DAUNkJPni2vejm0UxDfx+w0Ip4d7nna+uO5+xDRh3IDvrreWcwrgfS4LwOtdreu42WwOgKujMhDehHEDvjlwXLkFwB5OATAyNQP4m7hsnEfagHED3+I1nx5TALZtA1B/fABgenwC+DRxsr/jmXfdfEnmLQisA3Jyx3EAKLy1AEiNpgE4q970WSVsx9JxVNf/Fbfyba4sSZeC6CaMG4gcP7kthYUMAKXnJhDeRHINCGIis+jmxFOtCuibSL4BQUxMWhYArfsGEGyifwwIYXPCuAHtN6Eu7YpZLmlVTOMGep4DnUhOCJ3vBuMG/vkAdwpuqGZ4JjgAAAAASUVORK5CYII=");
}

:root[data-icon-size="small"] {
  --icon-size-lg: 38px;
  --icon-size-md: 32px;
  --icon-size-sm: 28px;
  --icon-size-xs: 24px;
  --icon-size-candidate: 32px;
}

:root[data-icon-size="large"] {
  --icon-size-lg: 76px;
  --icon-size-md: 64px;
  --icon-size-sm: 56px;
  --icon-size-xs: 48px;
  --icon-size-candidate: 60px;
}

:root[data-theme="light"] {
  --bg: #f4f5f7;
  --panel: #ffffff;
  --panel-2: #f7f7f9;
  --input-bg: #ffffff;
  --border: #dfe1e6;
  --border-strong: #c7cad1;
  --text: #1b1c20;
  --muted: #6b6e79;
  --accent: #3f9142;
  --accent-dark: #337536;
  --accent-contrast: #ffffff;
  --accent-soft: rgba(63, 145, 66, 0.1);
  --warn: #a8671c;
  --warn-soft: rgba(168, 103, 28, 0.1);
  --danger: #c23b34;
  --danger-soft: rgba(194, 59, 52, 0.08);
  --shadow: 0 1px 2px rgba(20, 20, 30, 0.06), 0 4px 10px rgba(20, 20, 30, 0.05);
}

:root[data-high-contrast="true"] {
  --border: #757888;
  --border-strong: #a0a4b8;
  --text: #ffffff;
  --panel: #121218;
  --panel-2: #0a0a0f;
  --input-bg: #0d0d12;
}

:root[data-reduce-motion="true"] *,
:root[data-reduce-motion="true"] *::before,
:root[data-reduce-motion="true"] *::after {
  animation-duration: 0.001s !important;
  transition-duration: 0.001s !important;
}

:root[data-large-font="true"] {
  font-size: 18px;
}

/* High-Fidelity Pixel-Art Minecraft Cursors */
/* § "PointerCraft... pioche, épée et hache sont catastrophiques" — the
   earlier hand-drawn SVGs redrew each blade at the TOP-RIGHT of the 16x16
   canvas but declared their hotspot at "0 0" (top-left) — meaning the
   actual click point sat in the empty corner, up to a full icon-width away
   from the visible tip. Their hand-drawn silhouettes also didn't match the
   real tool shapes at all. Fixed by using the real, official item textures
   (already vetted, correct pixel art — same PNGs already cached under
   public/assets/minecraft/) mirrored horizontally and upscaled 2x with
   nearest-neighbour resampling (crisp pixel edges, no blur) so the tip
   lands exactly at the hotspot instead of redrawing by hand. */
html[data-cursor="sword"], html[data-cursor="sword"] * {
  cursor: var(--cursor-icon-sword) 0 0, auto !important;
}
html[data-cursor="pickaxe"], html[data-cursor="pickaxe"] * {
  cursor: var(--cursor-icon-pickaxe) 10 4, auto !important;
}
html[data-cursor="axe"], html[data-cursor="axe"] * {
  cursor: var(--cursor-icon-axe) 10 2, auto !important;
}
html[data-cursor="crosshair"], html[data-cursor="crosshair"] * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23000000' d='M6 0h4v1H9v4h1v1h4v4h-1V9h-4v1H9v4H7v-4H6V9H2v1H1V6h1v1h4V6h1V1H6V0z'/%3E%3Cpath fill='%23ffffff' d='M7 1h2v4H7V1z M7 11h2v4H7v-4z M1 7h4v2H1V7z M11 7h4v2h-4V7z M7 7h2v2H7V7z'/%3E%3C/svg%3E") 8 8, crosshair !important;
}
html[data-cursor="pointer"], html[data-cursor="pointer"] * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23000000' d='M0 0v12l3-3 2 5 3-1-2-5 4-1L0 0z'/%3E%3Cpath fill='%23ffffff' d='M1 1v9.5l2.2-2.2 2 5 1.5-.5-2-5 3.3-.8L1 1z'/%3E%3C/svg%3E") 0 0, auto !important;
}

/* ---- Cursor click feedback (§ "animations quand on clique avec") ----
   A native `cursor` image can't itself be animated (browsers don't tween
   between cursor values), so a swing/flash is played instead by a tiny
   fixed-position sprite spawned at the click point in JS (see app.js,
   "Cursor click feedback") and removed once its animation ends. Tool
   cursors get a swing arc using the same real texture as the OS cursor;
   crosshair/pointer get a hit-ring / ripple instead since "swinging" a
   reticle or an arrow wouldn't read as anything. Inherits the site-wide
   `[data-reduce-motion="true"] *` rule (near the top of this file), which
   collapses the animation to ~0s instead of needing special-casing here. */
#cursor-fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden; }
.cursor-fx {
  position: fixed; left: 0; top: 0; pointer-events: none;
  background-repeat: no-repeat; background-size: contain; image-rendering: pixelated;
}
.cursor-fx.swing {
  width: 48px; height: 48px; margin: -24px 0 0 -24px;
  animation: cursor-fx-swing 0.22s ease-out forwards;
}
@keyframes cursor-fx-swing {
  0%   { transform: rotate(-55deg) scale(0.85); opacity: 0; }
  20%  { opacity: 1; }
  55%  { transform: rotate(30deg) scale(1.05); opacity: 1; }
  100% { transform: rotate(40deg) scale(1); opacity: 0; }
}
.cursor-fx.hit-ring {
  width: 24px; height: 24px; margin: -12px 0 0 -12px;
  border: 3px solid var(--accent); border-radius: 50%;
  animation: cursor-fx-ring 0.3s ease-out forwards;
}
@keyframes cursor-fx-ring {
  0%   { transform: scale(0.4); opacity: 0.9; }
  100% { transform: scale(2.4); opacity: 0; }
}
.cursor-fx.ripple {
  width: 14px; height: 14px; margin: -7px 0 0 -7px;
  background: var(--accent); border-radius: 50%;
  animation: cursor-fx-ripple 0.35s ease-out forwards;
}
@keyframes cursor-fx-ripple {
  0%   { transform: scale(0.3); opacity: 0.6; }
  100% { transform: scale(3.4); opacity: 0; }
}

* { box-sizing: border-box; }

/* Several components below set their own `display` (flex, mostly) at the
   same specificity as the browser's built-in `[hidden] { display: none }`
   rule — and since this stylesheet loads after the UA sheet, the
   component's `display` silently won, so setting `.hidden = true` in JS
   never actually hid them: the login form stayed visible while already
   connected, the draft banner never went away after "Effacer", and the
   save/export toolbar showed up before any plan even existed (looking
   like a stray bar "in the middle" of the page). `!important` forces
   `hidden` to always win regardless of any other display rule. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
}

*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- Topbar ---- */
.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 200;
}

.topbar h1 { font-size: 1.25rem; margin: 0; margin-right: auto; letter-spacing: -0.01em; }

.edition-controls { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.edition-controls label { display: flex; flex-direction: column; font-size: 0.75rem; color: var(--muted); gap: 0.2rem; }

.theme-toggle {
  background: var(--input-bg);
  border: 1px solid var(--border);
  color: var(--text);
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  font-size: 1.05rem;
  line-height: 1;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.theme-toggle:hover { background: var(--panel-2); border-color: var(--border-strong); }

select, input, textarea, button {
  font: inherit;
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
}
select:hover, input:hover, textarea:hover { border-color: var(--border-strong); }

button {
  background: var(--accent);
  color: var(--accent-contrast);
  border: none;
  cursor: pointer;
  font-weight: 600;
  transition: background-color 0.12s ease, transform 0.12s ease;
}
button:hover { background: var(--accent-dark); }
/* § "animations... quand on passe dessus un bouton" — a small lift on
   hover and a press-down squash on click, on every button site-wide
   (not just the accent ones) so hovering/clicking any control gives
   visible feedback, not just a color swap. */
button:not(:disabled):hover { transform: translateY(-1px); }
button:not(:disabled):active { transform: translateY(0) scale(0.96); }
button:disabled { opacity: 0.5; cursor: default; }
button.secondary { background: transparent; border: 1px solid var(--border); color: var(--muted); }
button.secondary:hover { background: var(--panel-2); color: var(--text); border-color: var(--border-strong); }
button.danger { background: transparent; border: 1px solid var(--danger); color: var(--danger); }
button.danger:hover { background: var(--danger-soft); }

.status { font-size: 0.8rem; color: var(--muted); }
.status.warn { color: var(--warn); }
.status.error { color: var(--danger); }
.status.success { color: var(--accent); }

.tabs { display: flex; gap: 0.25rem; padding: 0.5rem 1.25rem 0; background: var(--panel); border-bottom: 1px solid var(--border); overflow-x: auto; }
.tab-btn { background: transparent; color: var(--muted); border-radius: 6px 6px 0 0; white-space: nowrap; }
.tab-btn:hover { color: var(--text); }
.tab-btn.active { background: var(--bg); color: var(--text); }

main { padding: 1.25rem; max-width: 1000px; margin: 0 auto; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

h2 { letter-spacing: -0.01em; }

.catalog-header { margin-bottom: 0.75rem; }
#catalog-search { width: 100%; }

.catalog-table-wrap, .import-table-wrap {
  width: 100%; overflow-x: auto;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.catalog-table, .item-table, .import-table {
  width: 100%; border-collapse: collapse; table-layout: fixed;
}
.catalog-table th, .catalog-table td,
.item-table th, .item-table td,
.import-table th, .import-table td {
  text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border);
  vertical-align: middle; font-size: 0.88rem;
}
/* The icon column has to follow the icon-size setting, not a fixed 60px:
   with `table-layout: fixed` a column narrower than its image does not
   grow, the image simply spills over the next cell and sits on top of the
   resource name. Deriving the width from --icon-size-md keeps exactly the
   old 60px at the default size (44px icon + the 0.5rem padding on each
   side, border-box) and widens with the Large setting instead of
   overflowing. */
.catalog-table th:first-child, .catalog-table td:first-child,
.item-table th:first-child, .item-table td:first-child,
.import-table th:first-child, .import-table td:first-child {
  width: calc(var(--icon-size-md) + 1rem); text-align: center; padding: 0.45rem 0.5rem;
}
.catalog-table th:nth-child(2), .catalog-table td:nth-child(2) {
  width: auto;
}
.catalog-table th:nth-child(3), .catalog-table td:nth-child(3) {
  width: 120px;
}
.catalog-table th:nth-child(4), .catalog-table td:nth-child(4) {
  width: 100px; text-align: center;
}
.catalog-table tbody tr:hover,
.item-table tbody tr:hover,
.import-table tbody tr:hover {
  background: var(--panel-2);
}
.catalog-table img.icon,
.item-table img.icon,
.import-table img.icon {
  image-rendering: pixelated; image-rendering: crisp-edges;
  width: var(--icon-size-md); height: var(--icon-size-md);
  object-fit: contain; display: inline-block; vertical-align: middle;
}

/* ---- Clean, sober modern icon styling ---- */
img.icon {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 3px;
  box-sizing: border-box;
  border-radius: 4px;
  display: inline-block;
  vertical-align: middle;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  object-fit: contain;
}

.pagination { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.85rem; flex-wrap: wrap; }
.pagination button { background: transparent; border: 1px solid var(--border); color: var(--text); min-width: 2.2rem; padding: 0.35rem 0.5rem; font-size: 0.85rem; }
.pagination button.active { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); font-weight: 700; }
.pagination button:disabled { opacity: 0.4; cursor: default; }
.pagination .page-ellipsis { color: var(--muted); padding: 0 0.25rem; }
.pagination .page-count { margin-left: 0.5rem; font-size: 0.78rem; color: var(--muted); }

/* ---- Convertisseur ---- */
.convert-hint {
  color: var(--muted); font-size: 0.85rem; margin: 0 0 1rem; max-width: 640px; line-height: 1.5;
}
.convert-form {
  display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: end; margin-bottom: 1.25rem;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 1.25rem; box-shadow: var(--shadow);
}
.convert-row {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; width: 100%; position: relative;
}
.convert-row label {
  position: relative; display: flex; flex-direction: column; font-size: 0.82rem; color: var(--muted); gap: 0.3rem; flex: 1 1 200px;
}
.convert-row input, .convert-row select { width: 100%; }

.convert-item-dropdown, .item-picker-results {
  position: absolute; top: 100%; left: 0; width: 100%; max-width: 480px; z-index: 50; margin-top: 0.3rem;
  background: var(--input-bg); border: 1px solid var(--border); border-radius: var(--radius);
  max-height: 280px; overflow-y: auto; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.convert-item-dropdown .item-option, .item-picker-results .item-option {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.85rem; cursor: pointer; font-size: 0.9rem;
}
.convert-item-dropdown .item-option:hover, .item-picker-results .item-option:hover {
  background: var(--accent); color: var(--accent-contrast);
}
.convert-item-dropdown .item-option img.icon, .item-picker-results .item-option img.icon {
  width: var(--icon-size-md); height: var(--icon-size-md); image-rendering: pixelated; image-rendering: crisp-edges; flex-shrink: 0; object-fit: contain;
}
.convert-item-selected, .item-picker-selected {
  display: flex; align-items: center; gap: 0.75rem; margin-top: 0.5rem;
  background: var(--panel-2); border: 1px solid var(--accent); border-radius: var(--radius); padding: 0.45rem 0.85rem; width: fit-content;
}
.convert-item-selected img.icon, .item-picker-selected img.icon {
  width: var(--icon-size-md); height: var(--icon-size-md); image-rendering: pixelated; image-rendering: crisp-edges; flex-shrink: 0; object-fit: contain;
}
.convert-item-selected .secondary, .item-picker-selected .secondary {
  padding: 0.25rem 0.55rem; font-size: 0.78rem;
}

.qty-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  max-width: 560px;
  box-shadow: var(--shadow);
}
.qty-card h3 { margin-top: 0; display: flex; align-items: center; gap: 0.5rem; font-size: 1.1rem; }
.qty-card .row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0; border-bottom: 1px dashed var(--border); font-size: 0.9rem; }
.qty-card .row:last-child { border-bottom: none; }
.qty-card .required { color: var(--warn); font-size: 0.85rem; margin-top: 0.4rem; }
.qty-card .qty-legend { margin-top: 0.75rem; padding-top: 0.6rem; border-top: 1px solid var(--border); font-size: 0.72rem; color: var(--muted); }
.qty-legend-static { font-size: 0.78rem; color: var(--muted); margin: -0.25rem 0 0.75rem; }

.import-controls { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.35rem; }
.import-format-hint {
  font-size: 0.84rem;
  color: var(--muted);
  margin: 0.25rem 0 1rem;
  line-height: 1.5;
}
.import-format-hint code {
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  color: var(--accent);
  font-size: 0.8rem;
}
.import-format-hint strong {
  color: var(--text);
}

/* ---- Import Progress Bar & Status Phrase ---- */
.import-progress-container {
  margin: 0.85rem 0 1.25rem;
  padding: 0.85rem 1.15rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  animation: choices-slide 0.2s ease-out;
}
.import-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
  color: var(--text);
}
.import-progress-label {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text);
}
.import-progress-percent {
  font-weight: 700;
  color: var(--accent);
  font-size: 0.88rem;
}
.progress-bar-track {
  width: 100%;
  height: 8px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.progress-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #059669, var(--accent), #34d399);
  border-radius: 999px;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.import-table {
  width: 100%; border-collapse: collapse; margin-top: 0.5rem; table-layout: fixed;
}
.import-table th, .import-table td {
  text-align: left; padding: 0.55rem 0.65rem; border-bottom: 1px solid var(--border);
  font-size: 0.85rem; vertical-align: middle;
}
/* Same reasoning as the catalog table above, with this table's own
   0.65rem horizontal cell padding: 54px was already too narrow for the
   default 44px icon, so the image sat on the item name at every size. */
.import-table th:first-child, .import-table td:first-child {
  width: calc(var(--icon-size-md) + 1.3rem); text-align: center;
}
.import-table th:nth-child(3), .import-table td:nth-child(3) {
  width: 90px; text-align: right;
}
.import-table th:nth-child(4), .import-table td:nth-child(4) {
  width: 130px; text-align: center;
}
.import-table th:nth-child(5), .import-table td:nth-child(5) {
  width: 150px; text-align: center;
}
.import-table th:nth-child(6), .import-table td:nth-child(6) {
  width: 110px; text-align: right;
}
.import-table th:nth-child(7), .import-table td:nth-child(7) {
  width: 220px;
}
.import-table img.icon {
  image-rendering: pixelated; image-rendering: crisp-edges;
  width: var(--icon-size-md); height: var(--icon-size-md); object-fit: contain;
}
.import-table tr.unmatched { background: var(--warn-soft); }
/* Flags the exact row a plan-computation error points at (§ "sur quel bloc"). */
.import-table tr.compute-error {
  background: var(--danger-soft);
  box-shadow: inset 3px 0 0 var(--danger);
}
.import-table .unmatched-badge { color: var(--warn); font-size: 0.7rem; }
.import-table .stock-input { width: 5.5rem; padding: 0.25rem 0.4rem; text-align: center; }
.import-table .missing-cell { font-weight: 600; }

/* § "un montant de marge... cinq à dix pour cent en cas de perte
   d'éléments lors de la construction" — a per-row safety buffer, saved
   and synced with the rest of the plan (see marginQty/effectiveMissing
   in app.js). */
.import-table .margin-cell { text-align: center; }
.margin-toggle { display: inline-flex; align-items: center; gap: 0.3rem; justify-content: center; white-space: nowrap; }
.margin-toggle input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; }
.margin-percent-input { width: 3.2rem; padding: 0.2rem 0.3rem; text-align: center; }
.margin-percent-input:disabled { opacity: 0.4; }
.margin-extra { font-size: 0.72rem; color: var(--accent); margin-top: 0.15rem; font-weight: 600; }
.margin-note { font-size: 0.7rem; color: var(--muted); font-weight: 400; }

/* ---- Import table sorting bar & sortable headers ---- */
.import-sort-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  background: var(--panel-2);
  border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
}
.import-sort-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}
.import-sort-right {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.import-sort-label {
  color: var(--muted);
  font-weight: 600;
  margin-right: 0.2rem;
  white-space: nowrap;
}
.import-sort-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  background: var(--input-bg);
  padding: 0.2rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.import-sort-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 0.8rem;
  padding: 0.25rem 0.55rem;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
  white-space: nowrap;
}
.import-sort-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}
:root[data-theme="light"] .import-sort-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}
.import-sort-btn.active {
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 600;
}
.import-sort-dir-group {
  display: inline-flex;
  gap: 0.2rem;
  background: var(--input-bg);
  padding: 0.2rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.import-sort-dir-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 0.78rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.import-sort-dir-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}
:root[data-theme="light"] .import-sort-dir-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}
.import-sort-dir-btn.active {
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 700;
}

/* Sortable table headers */
.import-table th.sortable {
  cursor: pointer;
  user-select: none;
  transition: color 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}
.import-table th.sortable:hover {
  color: var(--accent);
  background: rgba(255, 255, 255, 0.03);
}
:root[data-theme="light"] .import-table th.sortable:hover {
  background: rgba(0, 0, 0, 0.02);
}
.import-table th.sortable.sorted {
  color: var(--accent);
  font-weight: 700;
}
.import-th-content {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.import-table th:nth-child(3) .import-th-content,
.import-table th:nth-child(6) .import-th-content {
  justify-content: flex-end;
  width: 100%;
}
.import-table th:nth-child(4) .import-th-content,
.import-table th:nth-child(5) .import-th-content {
  justify-content: center;
  width: 100%;
}
.sort-indicator {
  display: inline-block;
  font-size: 0.7rem;
  opacity: 0.35;
  transition: opacity 0.15s;
}
.import-table th.sortable:hover .sort-indicator {
  opacity: 0.75;
}
.import-table th.sortable.sorted .sort-indicator {
  opacity: 1;
  color: var(--accent);
  font-weight: 700;
}

/* ---- Raw import detail (collapsible) ---- */
.raw-details { margin: 0.75rem 0 1.25rem; border: 1px solid var(--border); border-radius: var(--radius); padding: 0 0.75rem; }
.raw-details summary { cursor: pointer; padding: 0.6rem 0; color: var(--muted); font-size: 0.85rem; }
.raw-details[open] summary { border-bottom: 1px solid var(--border); }
.raw-details #import-results { padding: 0.5rem 0 0.75rem; }

/* ---- Plan section ---- */
.plan-section { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.plan-controls { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.plan-part h2 { font-size: 1.05rem; margin: 1.5rem 0 0.75rem; }
.plan-part:first-child h2 { margin-top: 0; }

.raw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.75rem; }
.raw-card {
  display: flex; gap: 0.85rem; align-items: flex-start;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0.75rem 1rem;
  box-shadow: var(--shadow-sm);
}
.raw-card img.icon {
  width: var(--icon-size-md); height: var(--icon-size-md);
  image-rendering: pixelated; image-rendering: crisp-edges; flex-shrink: 0;
}
.raw-card .item-check { flex-shrink: 0; width: 1.25rem; height: 1.25rem; cursor: pointer; accent-color: var(--accent); margin: 0; margin-top: 0.15rem; }
.raw-card.done { opacity: 0.55; }
.raw-card.done .raw-name, .raw-card.done .raw-qty-badge, .raw-card.done .raw-qty-note { text-decoration: line-through; }
.raw-card .raw-card-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.raw-card .raw-header-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.raw-card .raw-item-trigger { display: inline-flex; align-items: center; gap: 0.55rem; min-width: 0; }
.raw-card .raw-name { font-weight: 600; font-size: 0.92rem; color: var(--text); }
.raw-card .raw-qty-badge { font-weight: 700; font-size: 0.85rem; color: var(--accent); white-space: nowrap; flex-shrink: 0; }
.raw-card .raw-qty-note { font-size: 0.74rem; color: var(--muted); margin-left: calc(var(--icon-size-md) + 0.55rem); }

/* ---- Steps list (Structured 3-Tier Minimalist) ---- */
.steps-list { display: flex; flex-direction: column; gap: 0.75rem; }
.step-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.85rem 1.1rem; display: flex; flex-direction: column; gap: 0.65rem;
  box-shadow: var(--shadow-sm);
}
.step-card.done { opacity: 0.55; }
.step-card.done .item-name, .step-card.done .item-qty { text-decoration: line-through; }

/* Tier 1: Header Row (Step Number + Tool/Station + Checkbox) */
.step-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.step-header-left {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}
.step-idx {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  min-width: 1.85rem;
  min-height: 1.85rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 0.92rem;
  font-weight: 700;
  flex-shrink: 0;
}
.step-station-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--panel-2);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 0.25rem 0.65rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.step-batches-tag {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 500;
}

/* § "j'ai déjà une usine à laine colorée" — lets the player tell the plan
   they already produce a given block some other way, so it's gathered
   directly as a raw material instead of being fabricated here. */
.raw-override-tag-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.2rem 0;
  flex-wrap: wrap;
}
.raw-override-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--warn-soft);
  color: var(--warn);
  border: 1px solid rgba(224, 165, 72, 0.4);
  border-radius: 4px;
  padding: 0.12rem 0.45rem;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
}
.raw-revert-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.12rem 0.45rem;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: all 0.12s ease;
}
.raw-revert-btn:hover {
  background: var(--panel-2);
  color: var(--text);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}
.raw-revert-btn:active {
  transform: translateY(0);
}

.raw-override-btn.mark-raw-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  background: var(--panel-2);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 0.35rem 0.55rem;
  min-width: 58px;
  min-height: 44px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  margin-left: auto;
  flex-shrink: 0;
  line-height: 1.15;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}
.raw-override-btn.mark-raw-btn:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.raw-override-btn.mark-raw-btn .mark-btn-icon {
  font-size: 1.05rem;
  line-height: 1;
}
.raw-override-btn.mark-raw-btn .mark-btn-text {
  font-size: 0.7rem;
  font-weight: 600;
}
.step-card .item-check {
  width: 1.25rem;
  height: 1.25rem;
  cursor: pointer;
  accent-color: var(--accent);
  flex-shrink: 0;
  margin: 0;
}

/* Tier 2: Transformation Row (Input elements ➔ Output element + Action button) */
.step-transform-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  padding-left: 0.25rem;
}
.step-transform-flow {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex: 1;
  min-width: 0;
}
.step-inputs {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.step-plus-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0.15rem;
}
.step-arrow-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0.25rem;
}
.step-output {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.step-item {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.item-square {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  min-width: var(--icon-size-md);
  min-height: var(--icon-size-md);
  background: var(--panel-2);
  border: 1.5px solid var(--border-strong);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 3px;
  flex-shrink: 0;
}
.item-square.output-square {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.item-square img.icon {
  width: 100%;
  height: 100%;
  max-width: calc(var(--icon-size-md) - 6px);
  max-height: calc(var(--icon-size-md) - 6px);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  object-fit: contain;
  background: transparent;
  border: none;
  padding: 0;
}
.item-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.item-line-main {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  font-size: 0.95rem;
}
.item-qty {
  font-weight: 700;
  color: var(--warn);
  font-size: 1rem;
}
.item-qty.output-qty {
  color: var(--accent);
}
.item-name {
  color: var(--text);
  font-weight: 600;
}
.item-containers-detail {
  font-size: 0.76rem;
  color: var(--muted);
}
.step-plus {
  color: var(--muted);
  font-weight: 700;
  font-size: 1.1rem;
  padding: 0 0.15rem;
}
.step-arrow {
  color: var(--accent);
  font-size: 1.3rem;
  font-weight: bold;
  margin: 0 0.35rem;
}

.step-item.is-clickable,
.raw-item-trigger.is-clickable {
  cursor: pointer;
}

.step-item .item-square,
.raw-item-trigger .item-square {
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.step-item .item-name,
.raw-item-trigger .raw-name {
  transition: color 0.15s ease;
}

/* Subtle, unified hover effect */
.step-item.is-clickable:hover .item-name,
.raw-item-trigger.is-clickable:hover .raw-name {
  color: var(--accent);
}

.step-item.is-clickable:hover .item-square,
.raw-item-trigger.is-clickable:hover .item-square {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.step-output .step-item.is-clickable:hover .output-square {
  border-color: var(--accent);
  background: rgba(107, 191, 89, 0.22);
}

/* Tier 3: Destination Breakdown Lines */
.step-destinations {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.2rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--border);
  font-size: 0.82rem;
}
.dest-item {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  line-height: 1.4;
}
.dest-item.keep { color: var(--text); }
.dest-item.keep strong { color: var(--accent); }
.dest-item.use { color: var(--text); }
.dest-item.use strong { color: #8bb7f0; }
.dest-item.surplus { color: var(--muted); }
.dest-item.surplus strong { color: var(--warn); }
.dest-bullet { flex-shrink: 0; font-size: 0.85rem; }
.sources-breakdown { margin-top: 0.4rem; font-size: 0.72rem; color: var(--muted); line-height: 1.5; }
.raw-card .sources-breakdown { margin-top: 0.3rem; }

/* ---- Official-release-not-yet-syncable notice (§ écart minecraft-data) ---- */
.version-gap-notice {
  display: flex; justify-content: space-between; align-items: center; gap: 0.75rem;
  background: var(--warn-soft); border-bottom: 1px solid var(--warn);
  color: var(--warn); font-size: 0.85rem; padding: 0.55rem 1.25rem;
}
.version-gap-notice .notice-text { flex: 1; line-height: 1.4; }
.version-gap-notice a { color: inherit; text-decoration: underline; }
.version-gap-notice .notice-close-btn {
  background: transparent; border: none; color: inherit; font-size: 1.15rem; line-height: 1;
  padding: 0.2rem 0.45rem; cursor: pointer; border-radius: var(--radius); opacity: 0.75;
  transition: opacity 0.15s ease, background-color 0.15s ease; flex-shrink: 0;
}
.version-gap-notice .notice-close-btn:hover {
  opacity: 1; background: rgba(0, 0, 0, 0.12);
}

/* ---- Pending recipe choices ---- */
.pending-panel {
  background: var(--warn-soft); border: 1px solid var(--warn); border-radius: var(--radius-lg);
  padding: 1.25rem; margin-bottom: 1.25rem; animation: choices-slide 0.25s ease-out;
}
@keyframes choices-slide {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
.pending-panel > h3 { margin-top: 0; font-size: 1.1rem; }
.pending-item { border-bottom: 1px solid var(--border); padding: 0.85rem 0; }
.pending-item:last-child { border-bottom: none; }
.pending-item .pending-header { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.65rem; font-weight: 700; font-size: 1rem; }
.pending-header img.icon { width: var(--icon-size-lg); height: var(--icon-size-lg); image-rendering: pixelated; image-rendering: crisp-edges; flex-shrink: 0; }
.pending-candidates { display: flex; flex-direction: column; gap: 0.5rem; }
.candidate-option {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.85rem;
  border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; background: var(--input-bg);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.candidate-option:hover { border-color: var(--accent); background: var(--panel-2); transform: translateX(2px); }
.candidate-option.selected { border-color: var(--accent); background: var(--accent-soft, rgba(16, 185, 129, 0.15)); }
.candidate-option input[type="radio"] { margin: 0; accent-color: var(--accent); transform: scale(1.25); cursor: pointer; flex-shrink: 0; }
.candidate-option .candidate-flow { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.9rem; font-weight: 500; }
.candidate-option .candidate-flow img.icon { width: var(--icon-size-candidate); height: var(--icon-size-candidate); image-rendering: pixelated; image-rendering: crisp-edges; vertical-align: middle; }
.candidate-option .candidate-station { color: var(--muted); font-size: 0.78rem; margin-left: auto; white-space: nowrap; }
.pending-actions { display: flex; gap: 0.75rem; margin-top: 1rem; flex-wrap: wrap; }
.pending-actions button { padding: 0.65rem 1.25rem; font-size: 0.92rem; }

/* ---- Persistent discrete top draft banner ---- */
.draft-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap;
  background: var(--panel); border-bottom: 1px solid var(--accent);
  padding: 0.45rem 1.25rem; font-size: 0.82rem; color: var(--text);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); z-index: 20; position: sticky; top: 0;
}
.draft-banner-actions { display: flex; gap: 0.4rem; align-items: center; }
.draft-banner .draft-btn {
  padding: 0.25rem 0.6rem; font-size: 0.78rem; border-radius: var(--radius);
}

/* ---- User Settings & Preferences ---- */
.user-settings-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem; margin-bottom: 1.5rem;
}
.settings-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 1.1rem 1.25rem; display: flex; flex-direction: column; gap: 0.85rem;
  box-shadow: var(--shadow);
}
.settings-card h3 { margin: 0; font-size: 0.95rem; display: flex; align-items: center; gap: 0.4rem; }
.settings-group { display: flex; flex-direction: column; gap: 0.35rem; }
.settings-group label { font-size: 0.85rem; color: var(--text); display: flex; flex-direction: column; gap: 0.3rem; }
.settings-group select, .settings-group input { width: 100%; max-width: 320px; }
.settings-group-checkboxes { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.25rem; font-size: 0.85rem; }
.settings-group-checkboxes label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
#change-password-form { display: flex; flex-direction: column; gap: 0.75rem; }
#change-password-form button { align-self: flex-start; margin-top: 0.35rem; padding: 0.45rem 0.85rem; }
#change-password-form .status { margin-top: 0.25rem; }

/* ---- Saves Tab: Header Hero ---- */
.saves-hero {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow);
}
.saves-hero-icon {
  font-size: 2.2rem;
  line-height: 1;
  background: var(--accent-soft);
  color: var(--accent);
  padding: 0.65rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.saves-hero-content {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.saves-hero-content h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
}
.saves-intro {
  margin: 0;
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.5;
}

/* ---- Saves Tab: Auth Hub (Logged out) ---- */
.auth-section {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.auth-hub {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
}
.auth-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.6rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.auth-card:hover {
  border-color: var(--border-strong);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.auth-card-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border);
}
.auth-card-icon {
  font-size: 1.6rem;
  background: var(--panel-2);
  border: 1px solid var(--border);
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.auth-card-header h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
}
.auth-card-subtitle {
  margin: 0.15rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}
.auth-form-inner {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.auth-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.auth-field label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
}
.auth-field input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.55rem 0.75rem;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 0.9rem;
}
.auth-field input:focus {
  border-color: var(--accent);
  outline: none;
}
.auth-submit-btn {
  margin-top: 0.35rem;
  padding: 0.65rem 1.1rem;
  font-size: 0.92rem;
  font-weight: 700;
}
.auth-features-banner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
}
.auth-feature-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.84rem;
  color: var(--text);
  line-height: 1.4;
}
.auth-feature-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
}

/* ---- Saves Tab: Redeem Shared Plan Card ---- */
.redeem-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.75rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.redeem-card-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.redeem-card-icon {
  font-size: 1.5rem;
  background: var(--accent-soft);
  color: var(--accent);
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--accent);
}
.redeem-card-title-group h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}
.redeem-card-subtitle {
  margin: 0.15rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}
.redeem-form-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.redeem-code-input {
  width: 220px;
  font-family: monospace;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-align: center;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--border);
  background: var(--input-bg);
  border-radius: var(--radius);
  color: var(--text);
}
.redeem-code-input:focus {
  border-color: var(--accent);
  outline: none;
}
.redeem-btn {
  padding: 0.55rem 1.1rem;
  font-size: 0.9rem;
  font-weight: 700;
}

/* ---- Saves Tab: Section Headers ---- */
.saves-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 1.5rem 0 0.85rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border);
}
.saves-section-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.saves-section-title-wrap h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
}
.saves-counter-chip {
  background: var(--panel-2);
  color: var(--accent);
  border: 1px solid var(--accent);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
}

/* ---- Saves Tab: Plan Cards ---- */
.saves-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}
.save-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
  transition: transform 0.12s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  position: relative;
}
.save-card:hover {
  border-color: var(--border-strong);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.save-card.is-active-plan {
  border-color: var(--accent);
  background: linear-gradient(to right, rgba(107, 191, 89, 0.05), var(--panel));
}
.save-card-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  width: 100%;
}
.save-card-left {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
  min-width: 0;
}
.save-card-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: var(--panel-2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}
.save-card.is-active-plan .save-card-icon-wrap {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.save-card-details {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
  flex: 1;
}
.save-title-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}
.save-card .save-name {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.save-active-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 0.15rem 0.5rem;
  font-size: 0.76rem;
  font-weight: 600;
}
.active-dot {
  display: none;
}
.save-chips-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}
.save-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.76rem;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--muted);
  white-space: nowrap;
}
.save-chip-ver {
  font-weight: 600;
  color: var(--text);
}
.save-chip-share strong, .save-chip-owner strong {
  color: var(--text);
  margin-left: 0.2rem;
}
.save-chip-usage {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent);
  font-weight: 600;
}
.save-card .save-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
}
.save-card .save-actions button {
  padding: 0.45rem 0.85rem;
  font-size: 0.84rem;
  font-weight: 600;
}

/* ---- Saves Tab: Access Management Panel ---- */
.access-panel {
  margin-top: 0.85rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  background: var(--panel-2);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: 100%;
}
.access-header-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
}
.access-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.access-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid var(--border);
  font-size: 0.84rem;
}
.access-row.is-revoked {
  opacity: 0.7;
}
.access-user-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.access-user-avatar {
  font-size: 1rem;
}
.access-user-name {
  font-weight: 600;
  color: var(--text);
}
.access-status-badge {
  font-size: 0.72rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-weight: 600;
}
.access-status-badge.active {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent);
}
.access-status-badge.revoked {
  background: var(--danger-soft);
  color: var(--danger);
  border: 1px solid var(--danger);
}
.access-empty {
  font-size: 0.84rem;
  color: var(--muted);
  font-style: italic;
}
.access-loading, .access-error {
  font-size: 0.84rem;
  color: var(--muted);
}

/* ---- Saves Tab: Empty States ---- */
.saves-empty-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2.5rem 1.5rem;
  background: var(--panel);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  gap: 0.5rem;
}
.saves-empty-icon {
  font-size: 2.4rem;
  margin-bottom: 0.25rem;
  opacity: 0.85;
}
.saves-empty-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}
.saves-empty-desc {
  font-size: 0.84rem;
  color: var(--muted);
  max-width: 480px;
  margin: 0 0 0.5rem;
  line-height: 1.45;
}
.saves-empty-cta {
  margin-top: 0.25rem;
  padding: 0.55rem 1rem;
  font-size: 0.88rem;
  font-weight: 600;
}

/* ---- Accounts (§ "stocker les plans par utilisateur") ---- */
.account-indicator { position: relative; display: flex; align-items: center; }
.account-control-label { display: flex; flex-direction: column; font-size: 0.75rem; color: var(--muted); gap: 0.2rem; }
.account-dropdown-wrap { position: relative; display: inline-flex; }
.account-name-btn {
  font: inherit;
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  box-sizing: border-box;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
.account-name-btn:hover, .account-name-btn:focus-visible {
  background: var(--panel-2);
  border-color: var(--border-strong);
}
.account-name-btn .account-chevron {
  font-size: 0.7rem;
  color: var(--muted);
  transition: transform 0.15s ease;
}
.account-dropdown-wrap.open .account-chevron {
  transform: rotate(180deg);
}
.account-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 100;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  min-width: 170px;
  overflow: hidden;
  box-shadow: var(--shadow);
  animation: modal-overlay-fade 0.15s ease-out;
}
.account-dropdown-header {
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  background: var(--input-bg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.account-dropdown-header strong { color: var(--text); }
.account-dropdown-menu .dropdown-item {
  background: transparent;
  color: var(--text);
  border: none;
  border-radius: 0;
  padding: 0.5rem 0.75rem;
  font-size: 0.82rem;
  font-weight: 500;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  width: 100%;
}
.account-dropdown-menu .dropdown-item:hover {
  background: var(--panel-2);
}
.account-dropdown-menu .dropdown-item.danger {
  color: var(--danger);
}
.account-dropdown-menu .dropdown-item.danger:hover {
  background: var(--danger-soft);
}
.access-row .access-status-revoked { color: var(--muted); font-style: italic; }
.access-row button { padding: 0.2rem 0.55rem; font-size: 0.76rem; }
.access-empty { font-size: 0.8rem; color: var(--muted); }

/* ============================================================
   Admin Console & Dashboard Layout
   ============================================================ */
.admin-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem; box-shadow: var(--shadow); margin-bottom: 1.25rem;
}

/* Admin Login screen */
.admin-login-wrapper {
  display: flex; justify-content: center; align-items: center; min-height: 420px; padding: 2rem 1rem;
}
.admin-login-card {
  max-width: 480px; width: 100%; text-align: center; margin-bottom: 0;
  padding: 2.25rem 2rem; border-color: var(--border-strong);
}
.admin-login-icon {
  font-size: 2.5rem; margin-bottom: 0.75rem; display: inline-block;
  background: var(--panel-2); width: 64px; height: 64px; line-height: 64px;
  border-radius: 50%; border: 1px solid var(--border);
}
.admin-login-card h2 { margin: 0.25rem 0 0.5rem; font-size: 1.35rem; }
.admin-login-card p { font-size: 0.85rem; color: var(--muted); margin: 0 0 1.5rem; line-height: 1.45; }
.admin-login-form {
  display: flex; flex-direction: column; gap: 0.75rem; text-align: left;
}
.admin-login-form input {
  padding: 0.7rem 0.9rem; font-size: 0.95rem; width: 100%; box-sizing: border-box;
}
.admin-login-form button {
  padding: 0.7rem 1.2rem; font-size: 0.95rem; font-weight: 600; justify-content: center;
}

/* Admin Top Bar */
.admin-header-bar {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;
  padding: 0.85rem 1.25rem; background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius-lg); margin-bottom: 1.25rem; box-shadow: var(--shadow);
}
.admin-header-info {
  display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap;
}
.admin-badge-online {
  display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; font-size: 0.95rem;
  color: var(--text);
}
.admin-header-tag {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 20px;
  padding: 0.25rem 0.75rem; font-size: 0.8rem; color: var(--muted);
}

/* Admin Subnav / Switcher */
.admin-subnav {
  display: flex; gap: 0.5rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--border);
  padding-bottom: 0.5rem;
}
.admin-subnav-btn {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--muted);
  border-radius: var(--radius); padding: 0.55rem 1rem; font-size: 0.88rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: 0.5rem; transition: all 0.15s ease;
}
.admin-subnav-btn:hover {
  background: var(--panel); color: var(--text); border-color: var(--border-strong);
}
.admin-subnav-btn.active {
  background: var(--accent); color: var(--accent-contrast); border-color: var(--accent-dark);
  box-shadow: 0 2px 8px rgba(107, 191, 89, 0.25);
}
.admin-counter-chip {
  background: rgba(0, 0, 0, 0.2); border-radius: 12px; padding: 0.1rem 0.45rem;
  font-size: 0.75rem; font-weight: 700;
}
.admin-subnav-btn:not(.active) .admin-counter-chip {
  background: var(--panel); color: var(--text); border: 1px solid var(--border);
}

/* Admin KPI Grid */
.admin-kpi-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;
  margin-bottom: 1.25rem;
}
.admin-kpi-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 1rem 1.25rem; display: flex; align-items: center; gap: 1rem; box-shadow: var(--shadow);
}
.admin-kpi-card.kpi-warn {
  border-color: var(--danger); background: var(--panel);
}
.admin-kpi-icon {
  font-size: 1.75rem; width: 48px; height: 48px; border-radius: var(--radius);
  background: var(--panel-2); border: 1px solid var(--border); display: flex;
  align-items: center; justify-content: center; flex-shrink: 0;
}
.admin-kpi-card.kpi-warn .admin-kpi-icon {
  background: var(--danger-soft); border-color: var(--danger);
}
.admin-kpi-content {
  display: flex; flex-direction: column;
}
.admin-kpi-val {
  font-size: 1.4rem; font-weight: 700; color: var(--text); line-height: 1.2;
}
.admin-kpi-card.kpi-warn .admin-kpi-val {
  color: var(--danger);
}
.admin-kpi-lbl {
  font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em;
  margin-top: 0.15rem;
}

/* Admin Users Card & Toolbar */
.admin-users-card {
  padding: 1.25rem;
}
.admin-users-toolbar {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem;
  margin-bottom: 1rem;
}
.admin-search-wrap {
  flex: 1 1 240px; min-width: 200px;
}
.admin-search-wrap input[type="search"] {
  width: 100%; padding: 0.5rem 0.8rem; font-size: 0.88rem; box-sizing: border-box;
}
.admin-users-actions {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.admin-users-actions button {
  padding: 0.45rem 0.85rem; font-size: 0.85rem;
}

/* Table scrollable container with sticky header */
.admin-users-table-wrap {
  max-height: 500px; overflow-y: auto; overflow-x: auto; width: 100%;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--panel-2); position: relative;
}
.admin-users-table {
  width: 100%; border-collapse: collapse; font-size: 0.85rem; text-align: left;
}
.admin-users-table th {
  position: sticky; top: 0; z-index: 2; background: var(--panel);
  font-weight: 600; color: var(--muted); font-size: 0.78rem; text-transform: uppercase;
  letter-spacing: 0.03em; padding: 0.75rem 0.9rem; border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 var(--border);
}
.admin-users-table td {
  padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--border); vertical-align: middle;
}
.admin-users-table tr:last-child td { border-bottom: none; }
.admin-users-table tbody tr:hover td { background: rgba(255, 255, 255, 0.03); }

.admin-badge-active {
  display: inline-flex; align-items: center; gap: 0.25rem; background: rgba(34, 197, 94, 0.15); color: #22c55e;
  padding: 0.18rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600;
}
.admin-badge-locked {
  display: inline-flex; align-items: center; gap: 0.25rem; background: rgba(239, 68, 68, 0.15); color: #ef4444;
  padding: 0.18rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600;
}
.admin-actions-cell {
  display: flex; gap: 0.35rem; align-items: center; flex-wrap: wrap;
}
.admin-actions-cell button {
  padding: 0.25rem 0.55rem; font-size: 0.75rem; white-space: nowrap;
}

.admin-user-plans-list {
  display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem;
}
.admin-user-plan-item {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.5rem 0.75rem; display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; font-size: 0.82rem;
}

/* Maintenance & Sync View Grid */
.admin-maintenance-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.25rem;
  margin-bottom: 1.25rem;
}
.admin-maint-card {
  display: flex; flex-direction: column; justify-content: space-between; margin-bottom: 0;
}
.admin-maint-header {
  display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1rem;
}
.admin-maint-icon {
  font-size: 1.8rem; width: 48px; height: 48px; border-radius: var(--radius);
  background: var(--panel-2); border: 1px solid var(--border); display: flex;
  align-items: center; justify-content: center; flex-shrink: 0;
}
.admin-maint-header h3 { margin: 0 0 0.3rem; font-size: 1.05rem; }
.admin-maint-header p { margin: 0; font-size: 0.85rem; color: var(--muted); line-height: 1.45; }

.admin-maint-target-info {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.55rem 0.85rem; font-size: 0.82rem; color: var(--muted); margin-bottom: 1rem;
  display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;
}
.admin-maint-target-info strong { color: var(--text); }
.admin-maint-actions {
  margin-top: 0.75rem;
}
.admin-force {
  display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.8rem; color: var(--muted);
  line-height: 1.4; margin: 0.5rem 0 0.75rem; cursor: pointer;
}
.admin-force input { margin-top: 0.15rem; }

/* Special "preload everything" card — visually set apart from the
   per-version sync/warm cards since it's a much heavier, whole-catalogue
   operation. */
.admin-sync-all-card {
  border-left: 4px solid var(--accent);
  margin-bottom: 1.25rem;
}

/* CLI tip box */
.admin-cli-tip {
  display: flex; gap: 1rem; align-items: flex-start; background: var(--panel-2);
  border-left: 4px solid var(--accent); margin-bottom: 0;
}
.admin-cli-tip-icon { font-size: 1.5rem; flex-shrink: 0; }
.admin-cli-tip-body strong { font-size: 0.92rem; display: block; margin-bottom: 0.25rem; }
.admin-cli-tip-body p { margin: 0 0 0.5rem; font-size: 0.85rem; color: var(--muted); }
.admin-cli-tip-body pre {
  margin: 0; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.6rem 0.9rem; overflow-x: auto; font-size: 0.85rem; color: var(--accent);
}

/* ---- Home page — simple et sobre, du texte, dans la DA du site ---- */
.hero { max-width: 760px; }
.hero h2 { margin-top: 0; font-size: 1.35rem; color: var(--text); }
.hero h3 { margin: 1.85rem 0 0.85rem; font-size: 1.05rem; color: var(--text); }
.hero p { color: var(--muted); line-height: 1.6; margin: 0.55rem 0; font-size: 0.92rem; }
.hero p strong { color: var(--text); }
.hero .hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.25rem 0 0.5rem;
}
.hero .hero-actions button {
  padding: 0.6rem 1.2rem;
  font-size: 0.95rem;
  font-weight: 600;
}

/* ---- Project Management Toolbar (Top-Centered in tab-import) ---- */
.project-toolbar {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.85rem;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 0.85rem 1.25rem; margin-bottom: 1.5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.project-toolbar-left {
  display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; flex: 1 1 320px;
}
.project-toolbar-left input { width: 240px; }
.project-toolbar-right {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-left: auto;
}

.save-syncing-badge {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.85rem; color: var(--accent); font-weight: 600;
}
.sync-spinner {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid var(--accent); border-top-color: transparent;
  border-radius: 50%; animation: sync-spin 0.75s linear infinite;
  vertical-align: middle;
}
@keyframes sync-spin {
  to { transform: rotate(360deg); }
}
.save-synced-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.84rem;
  color: var(--text);
  font-weight: 500;
  cursor: pointer;
  padding: 0.25rem 0.6rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.save-synced-badge:hover {
  border-color: var(--accent);
  background: var(--bg);
}
.synced-plan-name {
  font-weight: 700;
  color: var(--text);
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.synced-badge-status {
  font-size: 0.74rem;
  color: var(--accent);
  font-weight: 600;
  background: rgba(107, 191, 89, 0.12);
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-sm, 4px);
  border: 1px solid rgba(107, 191, 89, 0.25);
}
.synced-edit-icon {
  font-size: 0.74rem;
  opacity: 0.6;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.save-synced-badge:hover .synced-edit-icon {
  opacity: 1;
  transform: scale(1.15);
}
.save-readonly-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.84rem;
  color: var(--text);
  font-weight: 500;
  padding: 0.25rem 0.6rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.save-readonly-badge strong {
  color: var(--accent);
  font-weight: 700;
}
.save-readonly-badge .shared-tag {
  font-size: 0.74rem;
  color: var(--muted);
}
.export-wrap { position: relative; flex-shrink: 0; }
.export-menu {
  position: absolute; top: 110%; right: 0; z-index: 5;
  background: var(--input-bg); border: 1px solid var(--border); border-radius: var(--radius);
  display: flex; flex-direction: column; min-width: 140px; overflow: hidden; box-shadow: var(--shadow);
}
.export-menu button { border-radius: 0; background: transparent; color: var(--text); text-align: left; font-weight: 400; padding: 0.45rem 0.75rem; }
.export-menu button:hover { background: var(--accent); color: var(--accent-contrast); }

/* ---- Local Working Draft Card in Saves Tab ---- */
.local-draft-card {
  background: rgba(6, 182, 212, 0.08); border: 1px solid rgba(6, 182, 212, 0.35);
  border-radius: var(--radius-lg); padding: 1.1rem 1.35rem; margin-bottom: 1.5rem;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;
}
.draft-card-info { display: flex; flex-direction: column; gap: 0.25rem; }
.draft-badge {
  display: inline-block; background: #0891b2; color: #ffffff; font-size: 0.72rem; font-weight: 700;
  padding: 0.15rem 0.5rem; border-radius: 4px; align-self: flex-start; text-transform: uppercase; letter-spacing: 0.03em;
}
.draft-title { font-weight: 700; font-size: 1rem; color: var(--text); }
.draft-time { font-size: 0.8rem; color: var(--muted); }
.draft-card-actions { display: flex; align-items: center; gap: 0.6rem; }

/* ---- Modal Overlay for Recipe Choices (Popup) ---- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 1.25rem;
  animation: modal-overlay-fade 0.2s ease-out;
}
@keyframes modal-overlay-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.modal-dialog {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg);
  width: 100%; max-width: 720px; max-height: 88vh; display: flex; flex-direction: column;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6); overflow: hidden;
  animation: modal-dialog-scale 0.2s ease-out;
}
@keyframes modal-dialog-scale {
  from { opacity: 0; transform: scale(0.96) translateY(-10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border); background: var(--panel-2);
  flex-shrink: 0; min-height: fit-content;
}
.modal-header h3 { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--text); }
.modal-close-btn {
  background: transparent; border: none; font-size: 1.2rem; cursor: pointer; color: var(--muted);
  padding: 0.25rem 0.6rem; border-radius: var(--radius); transition: background 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}
.modal-close-btn:hover { background: rgba(255, 255, 255, 0.1); color: var(--text); }
.modal-body {
  padding: 1.25rem; overflow-y: auto; overflow-x: hidden; flex: 1 1 auto; display: flex; flex-direction: column; gap: 1rem;
  scrollbar-gutter: stable;
}
.modal-lead {
  margin: 0; font-size: 0.88rem; color: var(--muted); line-height: 1.5;
}
.modal-footer {
  display: flex; justify-content: flex-end; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem;
  border-top: 1px solid var(--border); background: var(--panel-2); flex-wrap: wrap;
}
.modal-footer button { padding: 0.65rem 1.25rem; font-size: 0.92rem; }

/* ---- Share plan modal (code kept as-is, plus a copyable link) ---- */
.share-code-display {
  font-family: monospace; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.35em;
  text-align: center; background: var(--panel-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 0.75rem; color: var(--text);
}
.share-link-row { display: flex; gap: 0.5rem; }
.share-link-row input { flex: 1; font-size: 0.82rem; }

/* ---- Materials list update review modal (diff before applying) ---- */
.update-materials-summary { display: flex; flex-direction: column; gap: 0.6rem; }
.update-summary-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.update-badge {
  display: inline-flex; align-items: center; font-size: 0.8rem; font-weight: 700;
  padding: 0.3rem 0.65rem; border-radius: 999px; border: 1px solid var(--border);
  background: var(--panel-2); color: var(--muted);
}
.update-badge.added { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.update-badge.removed { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }
.update-badge.changed { border-color: var(--warn); background: var(--warn-soft); color: var(--warn); }
.update-warning {
  background: var(--warn-soft); border: 1px solid var(--warn); color: var(--warn);
  border-radius: var(--radius); padding: 0.6rem 0.85rem; font-size: 0.85rem; margin: 0; line-height: 1.4;
}
.update-note { margin: 0; font-size: 0.82rem; color: var(--muted); line-height: 1.4; }
.update-diff-section { margin-top: 0.75rem; }
.update-diff-title { margin: 0 0 0.5rem; font-size: 0.92rem; font-weight: 700; }
.update-diff-title.added { color: var(--accent); }
.update-diff-title.removed { color: var(--danger); }
.update-diff-title.changed { color: var(--warn); }
.update-diff-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.update-diff-item {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.6rem;
  border-radius: var(--radius); background: var(--panel-2); font-size: 0.88rem;
}
.update-diff-item img.icon { width: var(--icon-size-candidate, 24px); height: var(--icon-size-candidate, 24px); image-rendering: pixelated; image-rendering: crisp-edges; }
.update-diff-item.removed { opacity: 0.85; }
.update-diff-item.removed em { color: var(--muted); font-style: italic; }
.update-diff-delta {
  font-weight: 700;
  font-size: 0.82em;
  padding: 0.12rem 0.45rem;
  border-radius: var(--radius);
  margin-left: 0.35rem;
  display: inline-block;
  vertical-align: middle;
}
.update-diff-delta.increase {
  color: var(--warn);
  background: var(--warn-soft);
}
.update-diff-delta.decrease {
  color: var(--accent);
  background: var(--accent-soft);
}

/* ---- Pending join-by-link banner (saves tab) ---- */
.join-pending-banner {
  background: var(--warn-soft); border: 1px solid var(--warn); color: var(--warn);
  border-radius: var(--radius); padding: 0.65rem 1rem; font-size: 0.85rem;
  margin-bottom: 1.25rem; line-height: 1.4;
}

/* ---- Catalog Item Recipes Modal & Crafting Grid UI ---- */
.modal-recipe-dialog {
  max-width: 800px;
  max-height: 90vh;
}
.recipe-modal-item-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-shrink: 0;
  min-width: 0;
}
.recipe-modal-item-header img.icon {
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
  flex-shrink: 0;
}
.recipe-modal-item-header h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
}
.recipe-modal-item-meta {
  font-size: 0.82rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.modal-back-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: var(--radius);
  padding: 0.4rem 0.7rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.modal-back-btn:hover {
  background: var(--panel-2);
  color: var(--text);
  border-color: var(--border-strong);
}

/* Plan Context Notice in Recipe Modal */
.plan-recipe-context-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 0.55rem 0.85rem;
  font-size: 0.82rem;
  color: var(--text);
  flex-shrink: 0;
}
.plan-recipe-context-notice .show-all-variants-btn {
  background: transparent;
  border: none;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0;
  white-space: nowrap;
}
.plan-recipe-context-notice .show-all-variants-btn:hover {
  color: var(--accent-contrast, #fff);
}

/* An ingredient shown inside a recipe that itself has a recipe — click it
   to drill into that ingredient's own crafting recipe (see recipe.back /
   openItemRecipeModal's history stack). */
.ingredient-clickable {
  cursor: pointer;
}
.ingredient-clickable:hover {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 4px;
}

/* Small badge flagging an ingredient that itself has a recipe — a hint
   that there's another craft to drill into behind this one. */
.craftable-badge {
  position: absolute;
  top: 1px;
  left: 1px;
  font-size: 0.6rem;
  line-height: 1;
  background: rgba(0, 0, 0, 0.75);
  border-radius: 3px;
  padding: 1px 2px;
  pointer-events: none;
}
.flow-item {
  position: relative;
}

.recipe-tabs-nav {
  display: flex;
  gap: 0.5rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.75rem;
  overflow-x: auto;
  flex-shrink: 0;
  min-height: fit-content;
  width: 100%;
  box-sizing: border-box;
}
.recipe-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--border);
  background: var(--panel-2);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  transition: all 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.recipe-tab-btn:hover {
  border-color: var(--accent);
  background: var(--panel);
}

.recipe-tab-btn.active {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}
.recipe-tab-count {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
}

.recipe-tab-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1 0 auto;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
.recipe-craft-card {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
}
.recipe-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.88rem;
  font-weight: 600;
}
.recipe-card-station {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--accent);
  font-size: 0.82rem;
}

/* A station's real block texture (crafting table, furnace...) shown in
   place of a generic emoji wherever that station is named — recipe tabs,
   card headers, step badges. Small and undecorated so it drops into any
   inline-flex label alongside its text. */
.station-icon-img {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  vertical-align: middle;
}

/* ---- Clean Crafting Table 3x3 Bench (9 slots) ---- */
.minecraft-crafting-bench {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.9rem 1.15rem;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  width: fit-content;
  max-width: 100%;
}
.crafting-grid-header {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.crafting-grid-wrap {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: nowrap;
}
.crafting-grid-3x3 {
  display: grid;
  grid-template-columns: repeat(3, 44px);
  grid-template-rows: repeat(3, 44px);
  gap: 4px;
  background: rgba(0, 0, 0, 0.35);
  padding: 6px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.crafting-grid-slot {
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.crafting-grid-slot:hover {
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.06);
}
.crafting-grid-slot img.icon {
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  padding: 0;
}
.crafting-arrow {
  font-size: 1.6rem;
  color: var(--accent);
  font-weight: bold;
}
.crafting-result-slot {
  width: 56px;
  height: 56px;
  background: rgba(16, 185, 129, 0.08);
  border: 1.5px solid var(--accent);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.crafting-result-slot img.icon {
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  padding: 0;
}
.slot-count {
  position: absolute;
  bottom: 2px;
  right: 4px;
  font-size: 0.85rem;
  font-weight: 800;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.75);
  border-radius: 3px;
  padding: 0 4px;
  line-height: 1.2;
  font-family: monospace;
}
.crafting-grid-footer {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.4;
}

/* Hand Action Banner */
.hand-action-banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1.15rem;
  background: rgba(16, 185, 129, 0.06);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: var(--radius-lg);
}
.hand-action-icon {
  font-size: 2rem;
  line-height: 1;
}
.hand-action-details {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.hand-action-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text);
}
.hand-action-desc {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.4;
}
.hand-flow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.35rem;
  flex-wrap: wrap;
  font-size: 0.88rem;
  font-weight: 600;
}
/* Tool Station (Stonecutter, Furnace, etc.) */
.station-flow-box {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  padding: 0.85rem 1.15rem;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  flex-wrap: wrap;
}
.station-flow-slot {
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.station-flow-slot.result {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.station-flow-slot img.icon {
  width: 38px;
  height: 38px;
  background: transparent;
  border: none;
  padding: 0;
}
.station-flow-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}
.station-flow-icon {
  font-size: 1.25rem;
}
.station-flow-label {
  font-size: 0.76rem;
  color: var(--muted);
  font-weight: 600;
}
.station-arrow-symbol {
  font-size: 1.3rem;
  color: var(--accent);
  font-weight: bold;
}

/* Raw / Natural Notice */
.raw-notice-banner {
  padding: 1.5rem;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid var(--warn);
  border-radius: var(--radius-lg);
  color: var(--text);
  line-height: 1.6;
  font-size: 0.92rem;
}
.raw-notice-banner h4 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  color: var(--warn);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Step Card Recipe Schema Popover */
.step-recipe-wrap {
  position: relative;
  display: inline-block;
  margin-left: auto;
}
.step-recipe-btn {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: all 0.15s ease;
}
.step-recipe-btn:hover, .step-recipe-wrap:hover .step-recipe-btn {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-contrast);
}
.recipe-popover {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  z-index: 100;
  background: var(--panel);
  border: 1px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 1rem;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  min-width: 280px;
  display: none;
}
.step-recipe-wrap:hover .recipe-popover {
  display: block;
  animation: choices-slide 0.15s ease-out;
}
.recipe-popover .minecraft-crafting-bench {
  padding: 0.75rem;
  gap: 0.75rem;
}
.recipe-popover .crafting-grid-3x3 {
  grid-template-columns: repeat(3, 34px);
  grid-template-rows: repeat(3, 34px);
  padding: 4px;
}
.recipe-popover .crafting-grid-slot {
  width: 34px;
  height: 34px;
}
.recipe-popover .crafting-grid-slot img.icon {
  width: 26px;
  height: 26px;
}
.recipe-popover .crafting-result-slot {
  width: 44px;
  height: 44px;
}
.recipe-popover .crafting-result-slot img.icon {
  width: 34px;
  height: 34px;
}

.catalog-table tbody tr {
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.catalog-table tbody tr:hover {
  background: var(--panel-2);
}

/* ---- Language switcher (vertical dropdown overlay in topbar) ---- */
[data-lang-switcher] {
  display: inline-flex;
  align-items: center;
}

.lang-switcher-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.lang-switcher-btn {
  font: inherit;
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0 0.55rem;
  height: 32px;
  font-size: 0.82rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  box-sizing: border-box;
  line-height: 1;
  transform: none !important;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.lang-switcher-btn:hover, .lang-switcher-btn:focus-visible {
  background: var(--panel-2);
  border-color: var(--border-strong);
  transform: none !important;
}

.lang-switcher-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
}

.lang-switcher-name {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text);
}

.lang-switcher-chevron {
  font-size: 0.65rem;
  color: var(--muted);
  transition: transform 0.15s ease;
}

.lang-switcher-wrap.open .lang-switcher-chevron {
  transform: rotate(180deg);
}

/* ---- Dropdown menu panel (floats cleanly over topbar & page content) ---- */
.lang-switcher-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 9999;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px;
  width: 195px;
  box-sizing: border-box;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.25);
  animation: modal-overlay-fade 0.15s ease-out;
}

.lang-dropdown-header {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: 4px 8px 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

.lang-dropdown-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ---- Dropdown items - all countries strictly same dimensions ---- */
.lang-dropdown-item {
  background: transparent;
  color: var(--text);
  border: none;
  border-radius: 5px;
  padding: 0 8px;
  height: 36px;
  min-height: 36px;
  max-height: 36px;
  font-size: 0.84rem;
  font-weight: 500;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  transform: none !important;
  transition: background-color 0.1s ease, color 0.1s ease;
}

.lang-dropdown-item:hover, .lang-dropdown-item:focus-visible {
  background: var(--panel-2);
  color: var(--text);
  transform: none !important;
}

.lang-dropdown-item:not(:disabled):hover {
  transform: none !important;
}

.lang-dropdown-item.active {
  color: var(--accent);
  font-weight: 600;
  background: var(--accent-soft);
}

.lang-dropdown-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 14.67px;
  flex-shrink: 0;
  line-height: 1;
}

.lang-dropdown-name {
  flex: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lang-dropdown-check {
  font-size: 0.8rem;
  color: var(--accent);
  font-weight: 700;
  width: 16px;
  text-align: right;
  flex-shrink: 0;
}

/* ---- Standardized SVG flag icons (all exactly 22×14.67px, 3:2 ratio) ---- */
.lang-flag-icon {
  width: 22px;
  height: 14.67px;
  min-width: 22px;
  min-height: 14.67px;
  max-width: 22px;
  max-height: 14.67px;
  display: block;
  vertical-align: middle;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(128, 128, 128, 0.28);
  flex-shrink: 0;
}

/* Light theme flag border */
:root[data-theme="light"] .lang-flag-icon {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

/* Base rules for desktop (menu toggle and tab scroll arrows hidden on PC) */
.mobile-menu-toggle { display: none; }
.tab-scroll-arrow { display: none; }
.tabs-nav-wrapper { display: contents; }

/* ============================================================
   Responsive Design & Mobile Optimization
   - Desktop (>= 769px) is strictly preserved as-is.
   - Tablet breakpoint (<= 768px) and Mobile breakpoint (<= 480px)
     provide a first-class, touch-optimized mobile experience.
   ============================================================ */

@media (max-width: 768px) {
  /* ---- Global & Viewport ---- */
  html, body {
    max-width: 100vw;
    overflow-x: hidden;
  }

  body {
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  /* Prevent auto-zoom on input focus in iOS Safari & optimize touch */
  input, select, textarea {
    font-size: 16px;
    touch-action: manipulation;
  }

  button, .tab-btn, .candidate-option, .item-option, .lang-dropdown-item, .dropdown-item {
    touch-action: manipulation;
  }

  main {
    padding: 0.85rem 0.75rem;
    max-width: 100%;
  }

  /* ---- Topbar & Collapsible Mobile Dropdown Drawer ---- */
  .topbar {
    padding: 0.65rem 0.85rem;
    gap: 0.5rem;
    justify-content: space-between;
    align-items: center;
    position: relative;
  }

  .topbar h1 {
    font-size: 1.15rem;
    margin: 0;
    margin-right: auto;
  }

  .mobile-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 1.25rem;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: auto;
    transition: background 0.12s ease, border-color 0.12s ease;
  }

  .mobile-menu-toggle:hover {
    background: var(--panel-2);
    border-color: var(--border-strong);
  }

  /* Hidden by default on mobile */
  .edition-controls {
    display: none;
  }

  /* Open mobile drawer panel */
  .topbar.menu-open .edition-controls,
  .edition-controls.open {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0.75rem;
    padding: 1rem 0.85rem;
    background: var(--panel);
    border-top: 1px solid var(--border);
    margin: 0.5rem -0.85rem -0.65rem -0.85rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    animation: choices-slide 0.2s ease-out;
  }

  .edition-controls label {
    flex: 1 1 100%;
    width: 100%;
    font-size: 0.82rem;
    gap: 0.3rem;
  }

  .edition-controls select {
    width: 100%;
    height: 40px;
  }

  .account-indicator {
    width: 100%;
    flex: 1 1 100%;
  }

  .account-indicator .account-control-label {
    width: 100%;
  }

  .account-dropdown-wrap {
    width: 100%;
  }

  .account-name-btn {
    width: 100%;
    height: 40px;
    justify-content: space-between;
  }

  .edition-controls label:has([data-lang-switcher]) {
    flex: 1 1 100%;
    width: 100%;
  }

  [data-lang-switcher], .lang-switcher-wrap {
    width: 100%;
  }

  .lang-switcher-btn {
    width: 100%;
    height: 40px;
    justify-content: space-between;
  }

  #sync-status {
    width: 100%;
    text-align: center;
    font-size: 0.8rem;
    order: 10;
    margin-top: 0.25rem;
  }

  /* Dropdown overlays bounded within viewport */
  .lang-switcher-dropdown, .account-dropdown-menu {
    max-width: calc(100vw - 1.5rem);
    width: min(240px, calc(100vw - 1.5rem));
    right: 0;
    z-index: 1000;
  }

  /* ---- Sticky Tabs Bar with Scroll Arrows ---- */
  .tabs-nav-wrapper {
    display: flex;
    align-items: center;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 150;
    width: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }

  .tabs {
    flex: 1;
    display: flex;
    gap: 0.2rem;
    padding: 0.4rem 0.35rem 0;
    background: transparent;
    border-bottom: none;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar {
    display: none;
  }

  .tab-scroll-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    min-width: 28px;
    height: 34px;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--accent);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    margin: 0 3px;
    flex-shrink: 0;
    z-index: 2;
    transition: background 0.15s ease, color 0.15s ease;
  }

  .tab-scroll-arrow:active {
    background: var(--accent);
    color: var(--accent-contrast);
  }

  .tab-scroll-arrow[hidden] {
    display: none !important;
  }

  .tab-btn {
    padding: 0.55rem 0.75rem;
    font-size: 0.82rem;
    min-height: 38px;
    flex-shrink: 0;
  }

  /* ---- Hero (Home) ---- */
  .hero {
    max-width: 100%;
  }
  .hero h2 {
    font-size: 1.35rem;
  }
  .hero .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
  }
  .hero .hero-actions button,
  .hero #hero-start-btn {
    width: 100%;
    min-height: 44px;
    font-size: 1rem;
    margin-top: 0.35rem;
    justify-content: center;
  }

  /* ---- Catalog Tab (Vertical Item List Cards) ---- */
  #catalog-search {
    min-height: 42px;
    padding: 0.55rem 0.75rem;
  }

  .catalog-table-wrap {
    background: var(--panel);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    overflow: visible;
    border-radius: var(--radius-lg);
  }

  .catalog-table {
    display: block;
    width: 100%;
    border: none;
    table-layout: auto;
    min-width: 0;
  }

  .catalog-table thead {
    display: none;
  }

  .catalog-table tbody {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .catalog-table tr {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.12s ease;
    width: 100%;
    box-sizing: border-box;
  }

  .catalog-table tr:last-child {
    border-bottom: none;
  }

  .catalog-table td:nth-child(1) {
    width: 42px !important;
    padding: 0;
    border: none;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .catalog-table td:nth-child(1) img.icon {
    width: 40px;
    height: 40px;
  }

  .catalog-table td:nth-child(2) {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: none;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text);
    text-align: left;
    word-break: break-word;
  }

  .catalog-table td:nth-child(3) {
    width: auto !important;
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--panel-2);
    font-size: 0.75rem;
    color: var(--muted);
    flex-shrink: 0;
    text-align: center;
  }

  .catalog-table td:nth-child(4) {
    width: auto !important;
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--accent);
    border-radius: 4px;
    background: var(--accent-soft);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--accent);
    flex-shrink: 0;
    text-align: center;
  }

  .catalog-table td:nth-child(4)::before {
    content: "×";
    font-weight: 600;
    margin-right: 1px;
  }

  .pagination {
    justify-content: center;
    gap: 0.25rem;
  }

  .pagination button {
    min-width: 36px;
    height: 36px;
    padding: 0.3rem 0.45rem;
  }

  .pagination .page-count {
    width: 100%;
    text-align: center;
    margin-left: 0;
    margin-top: 0.25rem;
  }

  /* ---- Converter Tab ---- */
  .convert-form {
    padding: 0.9rem;
    gap: 0.85rem;
  }

  .convert-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
  }

  .convert-row label {
    flex: 1 1 100%;
    width: 100%;
  }

  .convert-row input, .convert-row select {
    width: 100%;
    min-height: 40px;
  }

  .convert-item-dropdown {
    max-width: 100%;
    width: 100%;
  }

  .convert-item-selected {
    width: 100%;
    box-sizing: border-box;
    justify-content: space-between;
  }

  .convert-form button[type="submit"] {
    width: 100%;
    min-height: 44px;
    font-size: 1rem;
    justify-content: center;
  }

  .qty-card {
    max-width: 100%;
    padding: 1rem 0.85rem;
  }

  .qty-card .row {
    flex-wrap: wrap;
    gap: 0.35rem;
  }

  /* ---- Build Plan (Import) Tab ---- */
  .project-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    padding: 0.85rem;
    margin-bottom: 1rem;
  }

  .project-toolbar-left {
    width: 100%;
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .project-toolbar-left input#save-name-input {
    width: 100%;
    flex: 1 1 100%;
    min-height: 40px;
  }

  .project-toolbar-left button#save-plan-btn {
    flex: 1 1 auto;
    min-height: 38px;
    justify-content: center;
  }

  .project-toolbar-right {
    width: 100%;
    margin-left: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0.5rem;
  }

  .project-toolbar-right button, .export-wrap button {
    width: 100%;
    min-height: 38px;
    justify-content: center;
    font-size: 0.82rem;
    padding: 0.4rem 0.6rem;
  }

  .export-wrap {
    width: 100%;
  }

  .export-menu {
    width: 100%;
    right: 0;
    left: 0;
  }

  .import-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  #import-btn {
    width: 100%;
    min-height: 44px;
    font-size: 0.95rem;
    justify-content: center;
    display: flex;
    align-items: center;
  }

  .import-progress-container {
    padding: 0.75rem 0.85rem;
  }

  .raw-details {
    padding: 0 0.5rem;
    margin: 0.65rem 0 1rem;
  }

  .raw-details summary {
    padding: 0.65rem 0.25rem;
    font-size: 0.82rem;
  }

  /* ---- Import Table -> Vertical Cards on Mobile ---- */
  .import-sort-bar {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 0.75rem;
    background: var(--panel);
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    padding: 0.6rem 0.65rem;
  }
  .import-sort-left, .import-sort-right {
    width: 100%;
    justify-content: space-between;
  }
  .import-sort-group {
    flex: 1;
    display: flex;
    justify-content: space-around;
  }
  .import-sort-btn {
    flex: 1;
    justify-content: center;
    padding: 0.35rem 0.2rem;
    font-size: 0.75rem;
  }
  .import-sort-dir-group {
    width: 100%;
    display: flex;
  }
  .import-sort-dir-btn {
    flex: 1;
    justify-content: center;
    padding: 0.35rem 0.5rem;
  }

  .import-table-wrap {
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
    padding: 0;
  }

  .import-table {
    display: block;
    width: 100%;
    border: none;
    table-layout: auto;
    min-width: 0;
  }

  .import-table thead {
    display: none;
  }

  .import-table tbody {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
  }

  .import-table tr {
    display: flex;
    flex-direction: column;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 0.85rem 1rem;
    box-shadow: var(--shadow);
    gap: 0.4rem;
    width: 100%;
    box-sizing: border-box;
  }

  .import-table tr.unmatched {
    background: var(--warn-soft);
    border-color: var(--warn);
  }

  .import-table tr.compute-error {
    background: var(--danger-soft);
    border-color: var(--danger);
  }

  .import-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 0;
    border: none;
    border-bottom: 1px dashed var(--border);
    font-size: 0.88rem;
    width: 100% !important;
    box-sizing: border-box;
    text-align: right;
  }

  /* Combined Header: Icon + Resource Name */
  .import-table td:nth-child(1) {
    display: block;
    height: 0;
    width: 0 !important;
    padding: 0;
    border: none;
    overflow: visible;
  }

  .import-table td:nth-child(1) img.icon {
    width: 42px;
    height: 42px;
    position: relative;
    z-index: 1;
    margin-top: 2px;
  }

  .import-table td:nth-child(2) {
    display: flex;
    align-items: center;
    padding: 0 0 0.5rem 50px;
    min-height: 44px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    text-align: left;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.35rem;
  }

  .import-table td:nth-child(3)::before {
    content: "Total requis :";
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: normal;
  }

  .import-table td:nth-child(4)::before {
    content: "En stock :";
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: normal;
  }

  .import-table td:nth-child(5)::before {
    content: "Marge de sécurité :";
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: normal;
  }

  .import-table td:nth-child(6) {
    font-weight: 700;
    color: var(--accent);
    font-size: 0.95rem;
  }

  .import-table td:nth-child(6)::before {
    content: "À obtenir / Manquant :";
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: normal;
  }

  .import-table td:nth-child(7) {
    border-bottom: none;
  }

  .import-table td:nth-child(7)::before {
    content: "Rangement :";
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: normal;
  }

  .import-table .stock-input {
    width: 5rem;
    min-height: 34px;
  }

  .margin-percent-input {
    width: 3rem;
    min-height: 32px;
  }

  .plan-controls {
    flex-direction: column;
    align-items: stretch;
  }

  #plan-btn {
    width: 100%;
    min-height: 44px;
    font-size: 0.98rem;
    justify-content: center;
  }

  .raw-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.6rem;
  }

  .raw-card {
    padding: 0.65rem 0.75rem;
    gap: 0.65rem;
  }

  .raw-card .item-check {
    width: 1.3rem;
    height: 1.3rem;
  }

  .raw-card .raw-title-row {
    gap: 0.35rem;
  }

  .raw-card .raw-name {
    font-size: 0.88rem;
  }

  .raw-card .raw-qty-badge {
    font-size: 0.85rem;
  }

  .steps-list {
    gap: 0.65rem;
  }

  .step-card {
    padding: 0.75rem 0.85rem;
    gap: 0.55rem;
    border-radius: var(--radius);
  }

  .step-header-row {
    flex-wrap: wrap;
    gap: 0.45rem;
  }

  .step-header-left {
    gap: 0.45rem;
  }

  .step-idx {
    width: 1.65rem;
    height: 1.65rem;
    min-width: 1.65rem;
    min-height: 1.65rem;
    font-size: 0.85rem;
  }

  .step-station-badge {
    font-size: 0.78rem;
    padding: 0.2rem 0.5rem;
  }

  .step-batches-tag {
    font-size: 0.72rem;
  }

  .step-card .item-check {
    width: 1.3rem;
    height: 1.3rem;
  }

  .step-transform-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding-left: 0;
    width: 100%;
  }

  .step-transform-flow {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
  }

  .step-inputs {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.25rem;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .step-plus-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding-left: 12px;
    margin: 0;
    line-height: 1;
  }

  .step-plus {
    color: var(--muted);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
    padding: 0;
    margin: 0;
    display: inline-block;
  }

  .step-arrow-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding-left: 12px;
    margin: 0;
    line-height: 1;
  }

  .step-arrow {
    display: inline-block;
    color: var(--accent);
    font-size: 1.25rem;
    font-weight: bold;
    transform: rotate(90deg);
    line-height: 1;
    margin: 0;
    padding: 0;
  }

  .step-output {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .raw-override-btn.mark-raw-btn {
    min-width: 50px;
    min-height: 42px;
    padding: 0.25rem 0.4rem;
    font-size: 0.68rem;
    margin-left: auto;
    flex-shrink: 0;
    align-self: center;
  }
  .raw-override-btn.mark-raw-btn .mark-btn-icon {
    font-size: 0.95rem;
  }
  .raw-override-btn.mark-raw-btn .mark-btn-text {
    font-size: 0.65rem;
  }

  .step-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.45rem;
    min-width: 0;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .item-square {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    margin: 0;
  }

  .item-line-main {
    font-size: 0.88rem;
    flex-wrap: wrap;
    gap: 0.2rem;
  }

  .item-qty {
    font-size: 0.92rem;
  }

  .item-name {
    font-size: 0.85rem;
    word-break: break-word;
  }

  .item-containers-detail {
    font-size: 0.72rem;
    word-break: break-word;
  }

  .step-destinations {
    font-size: 0.78rem;
    gap: 0.3rem;
  }

  .dest-item {
    gap: 0.35rem;
    line-height: 1.35;
  }

  /* ---- Saves Tab ---- */
  .saves-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem;
  }
  .saves-hero-icon {
    font-size: 1.8rem;
    padding: 0.45rem;
  }
  .auth-section {
    flex-direction: column;
    gap: 1.2rem;
  }
  .auth-hub {
    grid-template-columns: 1fr;
  }
  .auth-card {
    padding: 1rem;
  }
  .auth-features-banner {
    grid-template-columns: 1fr;
  }
  .redeem-card {
    padding: 1rem;
  }
  .redeem-form-row {
    flex-direction: column;
    align-items: stretch;
  }
  .redeem-code-input {
    width: 100%;
    min-height: 42px;
  }
  .redeem-btn {
    width: 100%;
    min-height: 42px;
  }

  .save-card {
    padding: 0.85rem 1rem;
  }

  .save-card-main {
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
  }

  .save-card-left {
    align-items: flex-start;
    gap: 0.75rem;
  }

  .save-card .save-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 0.4rem;
    width: 100%;
  }

  .save-card .save-actions button {
    min-height: 36px;
    padding: 0.35rem 0.5rem;
    font-size: 0.78rem;
    justify-content: center;
  }

  .local-draft-card {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    padding: 0.85rem;
  }

  .draft-card-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }

  .draft-card-actions button {
    min-height: 38px;
    justify-content: center;
  }

  .access-panel {
    gap: 0.5rem;
  }

  .access-row {
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  /* ---- Admin Tab (Vertical User Cards) ---- */
  .admin-login-wrapper {
    min-height: auto;
    padding: 1rem 0;
  }

  .admin-login-card {
    padding: 1.5rem 1rem;
  }

  .admin-header-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 0.85rem;
  }

  .admin-subnav {
    flex-direction: column;
    width: 100%;
    gap: 0.4rem;
  }

  .admin-subnav-btn {
    width: 100%;
    justify-content: space-between;
    min-height: 40px;
  }

  .admin-kpi-grid {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }

  .admin-users-card {
    padding: 0.85rem 0.75rem;
  }

  .admin-users-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
  }

  .admin-search-wrap {
    width: 100%;
    min-width: 0;
  }

  .admin-search-wrap input[type="search"] {
    min-height: 40px;
  }

  .admin-users-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
  }

  .admin-users-actions button {
    min-height: 38px;
    justify-content: center;
  }

  /* Admin Users Table -> User Cards on Mobile */
  .admin-users-table-wrap {
    border: none;
    background: transparent;
    max-height: none;
    overflow: visible;
  }

  .admin-users-table {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .admin-users-table thead {
    display: none;
  }

  .admin-users-table tbody {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
  }

  .admin-users-table tr {
    display: flex;
    flex-direction: column;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.85rem;
    gap: 0.4rem;
    box-shadow: var(--shadow-sm);
    width: 100%;
    box-sizing: border-box;
  }

  .admin-users-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.25rem 0;
    border: none;
    font-size: 0.84rem;
    width: 100% !important;
    box-sizing: border-box;
  }

  .admin-users-table td:nth-child(1) {
    font-size: 0.98rem;
    font-weight: 700;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid var(--border);
    justify-content: flex-start;
    gap: 0.5rem;
  }

  .admin-users-table td:nth-child(2)::before {
    content: "Inscrit le :";
    color: var(--muted);
    font-size: 0.78rem;
  }

  .admin-users-table td:nth-child(3)::before {
    content: "Plans créés :";
    color: var(--muted);
    font-size: 0.78rem;
  }

  .admin-users-table td:nth-child(4)::before {
    content: "Plans partagés :";
    color: var(--muted);
    font-size: 0.78rem;
  }

  .admin-users-table td:nth-child(5)::before {
    content: "Statut :";
    color: var(--muted);
    font-size: 0.78rem;
  }

  .admin-users-table td.admin-actions-cell {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
    gap: 0.35rem;
    width: 100%;
    margin-top: 0.4rem;
    padding-top: 0.55rem;
    border-top: 1px dashed var(--border);
  }

  .admin-maintenance-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .admin-maint-card {
    padding: 1rem 0.85rem;
  }

  .admin-maint-header {
    gap: 0.65rem;
  }

  .admin-maint-icon {
    width: 40px;
    height: 40px;
    font-size: 1.4rem;
  }

  .admin-cli-tip {
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.85rem;
  }

  /* ---- Modals & Overlays ---- */
  .modal-overlay {
    padding: 0.5rem;
    align-items: flex-end;
  }

  .modal-dialog {
    max-width: 100% !important;
    max-height: 92vh;
    width: 100%;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }

  .modal-header {
    padding: 0.75rem 0.9rem;
  }

  .modal-header h3 {
    font-size: 1.05rem;
  }

  .modal-body {
    padding: 0.85rem;
    gap: 0.75rem;
    -webkit-overflow-scrolling: touch;
  }

  .modal-footer {
    padding: 0.75rem 0.9rem;
    flex-direction: column-reverse;
    gap: 0.5rem;
    width: 100%;
  }

  .modal-footer button {
    width: 100%;
    min-height: 42px;
    font-size: 0.9rem;
    justify-content: center;
  }

  /* Recipe Modal in Mobile */
  .recipe-modal-item-header {
    gap: 0.6rem;
  }

  .recipe-modal-item-header img.icon {
    width: 38px;
    height: 38px;
  }

  .recipe-modal-item-header h3 {
    font-size: 1.05rem;
  }

  .recipe-tabs-nav {
    gap: 0.35rem;
    padding-bottom: 0.5rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .recipe-tabs-nav::-webkit-scrollbar {
    display: none;
  }

  .recipe-tab-btn {
    padding: 0.4rem 0.65rem;
    font-size: 0.8rem;
    min-height: 36px;
    flex-shrink: 0;
  }

  .recipe-craft-card {
    padding: 0.85rem;
    gap: 0.65rem;
  }

  .minecraft-crafting-bench {
    padding: 0.65rem 0.75rem;
    width: 100%;
    box-sizing: border-box;
    align-items: center;
  }

  .crafting-grid-wrap {
    gap: 0.65rem;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
  }

  .station-flow-box {
    padding: 0.65rem 0.75rem;
    gap: 0.65rem;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
  }

  .hand-action-banner {
    padding: 0.65rem 0.75rem;
    gap: 0.65rem;
    flex-direction: column;
    align-items: flex-start;
  }

  .settings-group select, .settings-group input {
    max-width: 100%;
    width: 100%;
    min-height: 40px;
  }

  .candidate-option {
    padding: 0.5rem 0.65rem;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  .candidate-option .candidate-flow {
    font-size: 0.82rem;
    gap: 0.35rem;
  }

  .candidate-option .candidate-station {
    margin-left: 0;
    width: 100%;
    font-size: 0.74rem;
  }

  .share-code-display {
    font-size: 1.35rem;
    letter-spacing: 0.2em;
    padding: 0.6rem;
  }

  .share-link-row {
    flex-direction: column;
    gap: 0.45rem;
  }

  .share-link-row input {
    min-height: 40px;
    width: 100%;
  }

  .share-link-row button {
    min-height: 40px;
    width: 100%;
    justify-content: center;
  }

  .draft-banner {
    padding: 0.4rem 0.65rem;
    font-size: 0.78rem;
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
  }

  .draft-banner-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
    width: 100%;
  }

  .draft-banner .draft-btn {
    min-height: 32px;
    justify-content: center;
    display: flex;
    align-items: center;
  }

  .version-gap-notice {
    padding: 0.45rem 0.75rem;
    font-size: 0.78rem;
  }
}

/* ---- Compact Phones (<= 480px) ---- */
@media (max-width: 480px) {
  main {
    padding: 0.65rem 0.5rem;
  }

  .topbar {
    padding: 0.5rem 0.6rem;
  }

  .topbar h1 {
    font-size: 1.05rem;
  }

  .raw-grid {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .raw-card {
    padding: 0.6rem 0.65rem;
  }

  .raw-card .raw-qty-note {
    font-size: 0.7rem;
  }

  .crafting-grid-3x3 {
    grid-template-columns: repeat(3, 38px);
    grid-template-rows: repeat(3, 38px);
    gap: 3px;
    padding: 4px;
  }

  .crafting-grid-slot {
    width: 38px;
    height: 38px;
  }

  .crafting-grid-slot img.icon {
    width: 30px;
    height: 30px;
  }

  .crafting-result-slot {
    width: 48px;
    height: 48px;
  }

  .crafting-result-slot img.icon {
    width: 38px;
    height: 38px;
  }

  .step-transform-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    width: 100%;
  }

  .step-transform-flow {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    flex: 1;
    min-width: 0;
  }

  .step-inputs {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    width: 100%;
  }

  .step-plus-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 11px;
    margin: 0;
    line-height: 1;
  }

  .step-plus {
    font-size: 1.05rem;
  }

  .step-arrow-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 11px;
    margin: 0;
    line-height: 1;
  }

  .step-arrow {
    display: inline-block;
    color: var(--accent);
    font-size: 1.15rem;
    font-weight: bold;
    transform: rotate(90deg);
    line-height: 1;
    margin: 0;
    padding: 0;
  }

  .step-output {
    display: flex;
    align-items: center;
    width: 100%;
  }

  .raw-override-btn.mark-raw-btn {
    min-width: 46px;
    min-height: 38px;
    padding: 0.2rem 0.3rem;
    margin-left: auto;
    flex-shrink: 0;
    align-self: center;
    margin-top: 0;
  }

  .step-card {
    padding: 0.65rem 0.75rem;
  }

  .modal-dialog {
    border-radius: var(--radius) var(--radius) 0 0;
  }
}

/* ==========================================================================
   Guide d'Expédition & Sourcing (Outil 3)
   ========================================================================== */

.expedition-nav {
  margin-bottom: 0.85rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0.75rem 1rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.expedition-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.expedition-nav-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.expedition-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.expedition-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-full, 9999px);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
  user-select: none;
}

.expedition-tab-btn:hover {
  background: var(--panel-hover, var(--border));
  border-color: var(--border-hover, var(--accent));
}

.expedition-tab-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.expedition-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.1rem 0.4rem;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.18);
  color: inherit;
  min-width: 1.25rem;
}

.expedition-tab-btn.active .expedition-tab-count {
  background: rgba(255, 255, 255, 0.28);
  color: #fff;
}

/* ==========================================================================
   Unified Plan Global Progress Bar
   ========================================================================== */

.plan-global-progress {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.55rem 0.85rem;
  margin: 0.6rem 0 1rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  box-shadow: var(--shadow-sm);
}

.plan-progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.78rem;
}

.plan-progress-left {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  color: var(--text);
}

.plan-progress-icon {
  font-size: 0.92rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

.plan-progress-title {
  font-size: 0.85rem;
  font-weight: 600;
}

.plan-progress-metrics {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--muted);
  flex-wrap: wrap;
}

.progress-sub-stat {
  display: inline-flex;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.15rem 0.45rem;
  font-weight: 500;
  color: var(--text);
}

.progress-percent-val {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--accent);
  margin-left: 0.2rem;
}

.plan-progress-track {
  width: 100%;
  height: 5px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 9999px;
  overflow: hidden;
  position: relative;
}

.plan-progress-fill {
  height: 100%;
  border-radius: 9999px;
  background: var(--accent);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.plan-progress-fill.complete {
  background: #50e3c2;
}

/* Minimal Secondary Expedition Summary Strip */
.expedition-summary {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.expedition-metric-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.2rem 0.5rem;
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--muted);
}

.expedition-metric-chip strong {
  color: var(--text);
  font-weight: 600;
}

/* Sourcing Badges inside Raw Material Card */
.raw-sourcing-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
  margin-left: calc(var(--icon-size-md) + 0.55rem);
}

.sourcing-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius);
  font-size: 0.72rem;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  line-height: 1.2;
}

.sourcing-badge.dim-nether {
  border-color: rgba(220, 50, 50, 0.4);
  background: rgba(220, 50, 50, 0.08);
  color: #e05252;
}

.sourcing-badge.dim-caves {
  border-color: rgba(50, 160, 220, 0.4);
  background: rgba(50, 160, 220, 0.08);
  color: #38a4d4;
}

.sourcing-badge.dim-surface {
  border-color: rgba(60, 180, 80, 0.4);
  background: rgba(60, 180, 80, 0.08);
  color: #48bb78;
}

.sourcing-badge.dim-ocean {
  border-color: rgba(40, 190, 190, 0.4);
  background: rgba(40, 190, 190, 0.08);
  color: #38b2ac;
}

.sourcing-badge.dim-end {
  border-color: rgba(160, 80, 220, 0.4);
  background: rgba(160, 80, 220, 0.08);
  color: #b794f4;
}

.sourcing-badge.dim-mob {
  border-color: rgba(240, 120, 40, 0.4);
  background: rgba(240, 120, 40, 0.08);
  color: #ed8936;
}

.sourcing-badge.dim-farming {
  border-color: rgba(220, 190, 40, 0.4);
  background: rgba(220, 190, 40, 0.08);
  color: #ecc94b;
}

.sourcing-badge.dim-structure {
  border-color: rgba(168, 85, 247, 0.4);
  background: rgba(168, 85, 247, 0.08);
  color: #c084fc;
}

.sourcing-badge.dim-villager {
  border-color: rgba(59, 130, 246, 0.4);
  background: rgba(59, 130, 246, 0.08);
  color: #60a5fa;
}

.sourcing-badge.dim-crafted {
  border-color: rgba(249, 115, 22, 0.4);
  background: rgba(249, 115, 22, 0.08);
  color: #fb923c;
}

.sourcing-btn-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.12rem 0.4rem;
  font-size: 0.72rem;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1.2;
}

.sourcing-btn-info:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Sourcing Modal Detailed View */
.sourcing-modal-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.sourcing-modal-header .icon {
  width: 44px;
  height: 44px;
  image-rendering: pixelated;
  flex-shrink: 0;
}

.sourcing-modal-header h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
}

.sourcing-modal-subtitle {
  font-size: 0.82rem;
  color: var(--muted);
}

.sourcing-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.sourcing-detail-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.sourcing-detail-card-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.sourcing-detail-card-val {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
}

.sourcing-farmable-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  margin-top: 0.2rem;
  align-self: flex-start;
}

.sourcing-farmable-pill.yes {
  background: rgba(72, 187, 120, 0.15);
  color: #38a169;
  border: 1px solid rgba(72, 187, 120, 0.3);
}

.sourcing-farmable-pill.no {
  background: rgba(160, 174, 192, 0.15);
  color: var(--muted);
  border: 1px solid var(--border);
}

.sourcing-alternatives-box {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem;
}

.sourcing-alternatives-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.sourcing-alternatives-list {
  margin: 0;
  padding-left: 1.25rem;
  font-size: 0.82rem;
  color: var(--text);
  line-height: 1.45;
}

/* ============================================================
   §"les projets" — a project groups worksites, shares them with
   a team through one link, and hands out roles. Two views share
   the tab (the list, and one open project), plus the context bar
   the worksite tab grows when it is showing a project's build.
   ============================================================ */

/* ---- Role badge: the same colours everywhere a role is named ---- */
.role-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.14rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border: 1px solid transparent;
}
.role-badge.role-chief    { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.role-badge.role-architect{ background: var(--warn-soft); color: var(--warn); border-color: var(--warn); }
.role-badge.role-builder  { background: var(--panel-2); color: var(--text); border-color: var(--border-strong); }
.role-badge.role-guest    { background: transparent; color: var(--muted); border-color: var(--border); }

/* ---- List view ---- */
.projects-actions-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.projects-actions-row .redeem-card { margin: 0; }

.project-card-progress {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.5rem;
  max-width: 26rem;
}
.project-card-progress .progress-bar-track { flex: 1; }
.project-card-progress-label {
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ---- One project ---- */
.project-detail-header { margin-bottom: 1.25rem; }
.project-back-btn { margin-bottom: 0.9rem; }
.project-detail-title-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}
.project-detail-name { margin: 0; font-size: 1.5rem; }
.project-detail-meta {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-top: 0.55rem;
}
.project-description { color: var(--muted); font-size: 0.88rem; }

/* ---- Dashboard: two figures for everyone, the rest for chiefs ---- */
.project-dashboard { margin-bottom: 1.25rem; }
.project-metrics {
  display: grid;
  grid-template-columns: minmax(9rem, 1fr) minmax(14rem, 2fr);
  gap: 0.9rem;
}
.project-metric {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.15rem;
}
.project-metric-value {
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.project-metric-label { font-size: 0.8rem; color: var(--muted); margin-top: 0.15rem; }
.project-metric-wide .progress-bar-track { margin-top: 0.7rem; }

.project-states {
  margin-top: 0.9rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.project-state {
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius);
  font-size: 0.83rem;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--panel);
}
.project-state-done    { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.project-state-started { color: var(--warn); border-color: var(--warn); background: var(--warn-soft); }
.project-state-idle    { color: var(--muted); }
.project-state-hold    { color: var(--muted); border-style: dashed; }

.project-top-materials, .project-contributions, .project-activity {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0.9rem 1.1rem 1rem;
}
.project-top-materials h4, .project-contributions h4, .project-activity h4 {
  margin: 0 0 0.2rem;
  font-size: 0.95rem;
}
.project-hint { font-size: 0.79rem; color: var(--muted); margin: 0.2rem 0 0.6rem; line-height: 1.45; }
.project-top-list, .project-contrib-list, .project-activity-list { list-style: none; margin: 0; padding: 0; }
.project-top-list li, .project-contrib-list li, .project-activity-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.32rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.86rem;
}
.project-top-list li:last-child, .project-contrib-list li:last-child, .project-activity-list li:last-child { border-bottom: none; }
/* A material row carries four things now — icon, name, how far the
   gathering got, and the pair of numbers behind that bar — so it aligns
   on a grid rather than pushing name and figure to opposite edges. */
/* Two lines, not four columns: these cards sit three-across on a wide
   screen, and a name like "Stripped Dark Oak Log" squeezed between an
   icon, a bar and a pair of five-digit numbers wrapped onto three lines
   of its own. The icon spans both rows so it still reads as one row. */
.project-top-list .top-mat-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.15rem 0.55rem;
  padding: 0.45rem 0;
}
.top-mat-icon {
  grid-row: span 2;
  align-self: start;
  width: 22px;
  height: 22px;
  image-rendering: pixelated;
  flex-shrink: 0;
}
.top-mat-supply {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.top-mat-supply .progress-bar-track { flex: 1; min-width: 2.5rem; }
.top-mat-track { height: 5px; }
.top-mat-row.is-complete .progress-bar-fill { background: var(--accent); }
.top-mat-name, .contrib-name { text-transform: capitalize; }
.contrib-name { text-transform: none; font-weight: 600; }
.top-mat-qty { font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; font-size: 0.8rem; }
.top-mat-row.is-complete .top-mat-qty { color: var(--accent); }
.contrib-detail { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.activity-line { line-height: 1.4; }
.activity-line strong { font-weight: 700; }
.activity-time { color: var(--muted); white-space: nowrap; font-size: 0.78rem; }

/* A section that carries an action of its own — export, a filter — puts it
   on the heading's line rather than below the hint nobody re-reads. */
.project-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.project-section-head h4 { margin: 0; }
.project-more-btn { margin-top: 0.5rem; font-size: 0.8rem; }
.project-activity-who {
  font-size: 0.78rem;
  padding: 0.15rem 0.35rem;
  max-width: 10rem;
}

/* ---- Each build, where it stands (steering tab) ---- */
.project-build-states {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0.9rem 1.1rem 1rem;
}
.project-build-states h4 { margin: 0 0 0.2rem; font-size: 0.95rem; }
.project-state-list { list-style: none; margin: 0; padding: 0; }
.project-state-row {
  display: grid;
  grid-template-columns: minmax(6rem, 1fr) auto;
  gap: 0.15rem 0.6rem;
  padding: 0.45rem 0.35rem;
  margin: 0 -0.35rem;
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.84rem;
  cursor: pointer;
}
.project-state-row:last-child { border-bottom: none; }
.project-state-row:hover, .project-state-row:focus-visible { background: var(--panel-2); outline: none; }
.project-state-row.is-on-hold { opacity: 0.7; }
.state-row-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.state-row-qty { color: var(--accent); font-variant-numeric: tabular-nums; }
.project-state-row.is-on-hold .state-row-qty { color: var(--muted); }
.state-row-blocks { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.state-row-bars {
  grid-column: 1 / -1;
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
}
.state-row-bar { display: flex; align-items: center; gap: 0.4rem; flex: 1 1 9rem; min-width: 0; }
.state-row-bar .progress-bar-track { flex: 1; }
.state-row-val {
  color: var(--muted);
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---- The project's own description, edited where it is administered ---- */
.project-description-edit {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  flex-wrap: wrap;
}
.project-description-input {
  flex: 1 1 18rem;
  font: inherit;
  font-size: 0.85rem;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 0.4rem 0.55rem;
  resize: vertical;
}
.project-description-input:focus { border-color: var(--accent); outline: none; }

/* ---- The two views of one project ----
   Chiefs only: everyone else never sees the switch, and the builds simply
   are the page. */
.project-view-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 1.1rem 0 1.1rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.7rem;
}
.project-view-tab {
  padding: 0.42rem 0.9rem;
  border-radius: var(--radius-full, 9999px);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.project-view-tab:hover { border-color: var(--accent); }
.project-view-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 700;
}
.project-steering-view { margin-bottom: 1.25rem; }
.project-chief-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 0.9rem;
  align-items: start;
  margin-bottom: 0.9rem;
}

/* ---- Chief tools ---- */
.project-chief-panel {
  display: grid;
  gap: 0.9rem;
}
.chief-section {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0.9rem 1.1rem 1rem;
}
.chief-section h4 { margin: 0 0 0.3rem; font-size: 0.95rem; }
.chief-share-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  margin-bottom: 0.7rem;
}
.share-code-inline {
  font-family: monospace;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent);
}
.share-link-input {
  flex: 1;
  min-width: 12rem;
  font-size: 0.82rem;
  font-family: monospace;
}
/* One row per role, most powerful first — the architect link is the one
   that needs a second look before it gets sent anywhere. */
.invite-list { display: grid; gap: 0.55rem; }
.invite-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel-2);
}
.invite-row .role-badge { min-width: 7.5rem; justify-content: center; }
.invite-row .share-link-input { flex: 1; min-width: 10rem; }
.invite-architect { border-color: var(--warn); }
.invite-missing { margin: 0; flex: 1; }

.invite-warning {
  margin: 0 0 0.7rem;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius);
  background: var(--warn-soft);
  border: 1px solid var(--warn);
  color: var(--warn);
  font-size: 0.82rem;
  line-height: 1.45;
}
.chief-transfer-row {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  flex-wrap: wrap;
}
.chief-transfer-row select { min-width: 10rem; }

/* ---- Cross-project shortlist ---- */
.shortlist-trigger-row { margin-bottom: 1.1rem; }
.shortlist-list { list-style: none; margin: 0; padding: 0; max-height: 60vh; overflow-y: auto; }
.shortlist-list li { padding: 0.6rem 0; border-bottom: 1px solid var(--border); }
.shortlist-list li:last-child { border-bottom: none; }
.shortlist-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.shortlist-name { font-weight: 600; text-transform: capitalize; }
.shortlist-qty { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent); white-space: nowrap; }
.shortlist-sources { font-size: 0.78rem; color: var(--muted); margin-top: 0.2rem; }

.member-list { list-style: none; margin: 0; padding: 0; }
.member-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
}
.member-row:last-child { border-bottom: none; }
.member-row.is-revoked { opacity: 0.55; }
.member-name { font-weight: 600; flex: 1; min-width: 8rem; }
.member-founder {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--muted);
  text-transform: lowercase;
}
.member-revoked { font-size: 0.8rem; color: var(--danger); }
.member-role-select { min-width: 9rem; font-size: 0.85rem; }
.member-ban-btn { font-size: 0.8rem; padding: 0.3rem 0.6rem; }

.chief-danger { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.chief-danger .project-hint { margin: 0; flex: 1; min-width: 12rem; }

/* ---- Search, tags, pins ---- */
.project-toolbar-row {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0.7rem;
}
.project-search-input { flex: 1; min-width: 12rem; }
.project-tag-filters {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}
.project-tag-filters:empty { margin-bottom: 0; }
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.62rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--panel);
  color: var(--text);
  font-size: 0.8rem;
  cursor: pointer;
}
.tag-chip:hover { border-color: var(--accent); }
.tag-chip.is-active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.tag-chip-count { color: var(--muted); font-variant-numeric: tabular-nums; }
.tag-chip.is-active .tag-chip-count { color: inherit; }
.tag-chip-clear { border-style: dashed; color: var(--muted); }
.tag-chip-clear:hover { color: var(--danger); border-color: var(--danger); }
/* Three states on one chip; the label says which, the border says "active". */
.tag-chip-hold { border-style: dashed; color: var(--muted); }
.tag-chip-hold:hover { color: var(--text); }
.tag-chip-hold.is-active { background: var(--panel-2); border-style: solid; border-color: var(--border-strong); color: var(--text); font-weight: 600; }

.project-builds-section + .project-builds-section { margin-top: 1.25rem; }

/* ---- One card's controls: move up, pin, move down, in one column ----
   They used to sit in two places — the arrows in their own gutter, the pin
   beside the icon — which spent two columns of width on one question. The
   pin between the arrows keeps the stack a fixed width whether or not
   reordering is available, so nothing shifts sideways between renders. */
.card-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  flex-shrink: 0;
  align-self: center;
}
.reorder-btn {
  width: 1.6rem;
  height: 1.35rem;
  padding: 0;
  line-height: 1;
  font-size: 0.7rem;
  border-radius: 4px;
  border: 1px solid var(--border-strong);
  background: var(--panel-2);
  color: var(--muted);
  cursor: pointer;
}
.reorder-btn:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
.reorder-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.pin-btn {
  background: transparent;
  border: 1px solid transparent;
  font-size: 1rem;
  line-height: 1;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  border-radius: var(--radius);
  cursor: pointer;
  filter: grayscale(1);
  opacity: 0.4;
}
.pin-btn:hover { opacity: 0.8; border-color: var(--border-strong); }
.pin-btn.is-pinned { filter: none; opacity: 1; background: var(--accent-soft); }

.build-qty-chip {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* ×1 is shown like any other count, but it is the quiet case: it says
   "checked, and it's one", not "several". */
.build-qty-chip.is-single {
  background: var(--panel-2);
  color: var(--muted);
}
/* ×0 is not "a smaller ×1": the line is parked. It reads as a state, not
   as a count, and the whole card steps back with it. */
.build-qty-chip.is-zero {
  background: var(--panel-2);
  color: var(--muted);
  border-style: dashed;
}
.save-card.is-on-hold { opacity: 0.72; }
.save-card.is-on-hold:hover { opacity: 1; }

/* The whole card is its own "open" button — the cursor has to say so. */
.save-card.is-openable { cursor: pointer; }
.save-card.is-openable button,
.save-card.is-openable input,
.save-card.is-openable select { cursor: auto; }
.save-card.is-openable .primary,
.save-card.is-openable .secondary,
.save-card.is-openable .danger,
.save-card.is-openable .pin-btn,
.save-card.is-openable .reorder-btn,
.save-card.is-openable .inline-edit-pencil,
.save-card.is-openable .build-tags-btn,
.save-card.is-openable .build-tag-remove { cursor: pointer; }

/* ---- Reordering by dragging the card ---- */
.save-card[draggable="true"] .save-card-icon-wrap,
.save-card[draggable="true"] .card-controls { cursor: grab; }
.save-card.is-dragging { opacity: 0.4; }
.save-card.drop-before { box-shadow: inset 0 3px 0 0 var(--accent); }
.save-card.drop-after { box-shadow: inset 0 -3px 0 0 var(--accent); }
.build-hold-note { color: var(--muted); font-style: italic; }
.build-context-name.is-on-hold { opacity: 0.75; }

/* ---- Editing a line where it is shown ---- */
.inline-edit-pencil {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 0.15rem 0.3rem;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.45;
}
.inline-edit-pencil:hover { opacity: 1; border-color: var(--border-strong); }
.build-name.is-editable, .plan-name.is-editable { cursor: text; }
.build-name.is-editable:hover, .plan-name.is-editable:hover {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.plan-name-input { flex: 1 1 14rem; font-weight: 700; }
.project-detail-name { cursor: default; }

.inline-edit-input {
  font: inherit;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 0.2rem 0.45rem;
  min-width: 0;
}
.inline-edit-title { font-size: 1.5rem; font-weight: 700; width: min(100%, 22rem); }
.build-name-input { flex: 1 1 12rem; font-weight: 700; }
.build-tags-input { flex: 1 1 16rem; font-size: 0.85rem; }
.inline-qty-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  color: var(--muted);
  font-weight: 700;
}
.build-qty-input { width: 4.5rem; font-variant-numeric: tabular-nums; }
.inline-edit-prefix { color: var(--muted); }
.inline-edit-ok, .inline-edit-cancel {
  border: 1px solid var(--border-strong);
  background: var(--panel-2);
  color: var(--text);
  border-radius: var(--radius);
  padding: 0.22rem 0.5rem;
  line-height: 1;
  cursor: pointer;
}
.inline-edit-ok:hover { border-color: var(--accent); color: var(--accent); }
.inline-edit-cancel:hover { border-color: var(--danger); color: var(--danger); }
.build-title-row.is-editing, .build-chips-row.is-editing, .plan-title-row.is-editing {
  gap: 0.4rem;
  width: 100%;
}
.build-tags-btn {
  cursor: pointer;
  border-style: dashed;
  color: var(--muted);
}
.build-tags-btn:hover { color: var(--accent); border-color: var(--accent); }
.build-tag-chip { background: var(--panel-2); color: var(--muted); gap: 0.25rem; }
.build-tag-remove {
  background: transparent;
  border: none;
  color: inherit;
  padding: 0 0 0 0.1rem;
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.45;
}
.build-tag-remove:hover { opacity: 1; color: var(--danger); }
.build-model-chip { color: var(--muted); }

.build-progress-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.35rem 1.1rem;
  margin-top: 0.55rem;
  max-width: 38rem;
}
.build-progress {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.76rem;
}
.build-progress-label { color: var(--muted); min-width: 7.5rem; }
.build-progress .progress-bar-track { flex: 1; }
.build-progress-value {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  min-width: 3.5rem;
  text-align: right;
}
/* Supply and construction measure different things, so they don't share a
   colour — holding every material is not the same as having built anything. */
.progress-bar-fill.progress-supply { background: var(--warn); }

/* ---- The context bar the worksite tab grows for a project build ---- */
.build-context-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  flex-wrap: wrap;
  padding: 0.6rem 0.9rem;
  margin-bottom: 0.9rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius-lg);
  background: var(--accent-soft);
}
.build-context-crumbs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  min-width: 0;
}
.build-context-project {
  background: transparent;
  border: none;
  padding: 0;
  color: var(--accent);
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.build-context-sep { color: var(--muted); }
.build-context-name { font-weight: 700; font-size: 0.95rem; }
.build-context-right { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }

/* The two slots the plan toolbar's controls move into. Empty outside a
   build, so they take no room and change nothing. */
.build-context-sync,
.build-context-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.build-context-sync:empty,
.build-context-actions:empty { display: none; }
/* Reduced to a status inside the bar: no folder, no name, no pencil —
   they are already three items to the left. */
.build-context-sync .save-synced-badge { cursor: default; }
.build-context-bar #save-status:empty { display: none; }

.build-counter {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 0.2rem 0.45rem;
}
.build-counter-label { font-size: 0.76rem; color: var(--muted); padding-left: 0.3rem; }
.build-counter-btn {
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--panel-2);
  color: var(--text);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.build-counter-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.build-counter-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.build-counter-value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 3.5rem;
  text-align: center;
}

/* A guest looks, they don't touch; supplying is a builder's job and
   rewriting the material list or the recipes is an architect's. The server
   enforces all of this — hiding it here only stops the interface from
   offering what would be refused. */
#tab-import[data-build-role="guest"] .stock-input,
#tab-import[data-build-role="guest"] .margin-check,
#tab-import[data-build-role="guest"] .margin-percent-input,
#tab-import[data-build-role="guest"] .item-check,
#tab-import[data-build-role="guest"] .x-check {
  pointer-events: none;
  opacity: 0.5;
}
#tab-import[data-build-role="guest"] #save-plan-btn,
#tab-import[data-build-role="guest"] #import-btn,
#tab-import[data-build-role="guest"] #update-materials-btn,
#tab-import[data-build-role="guest"] #plan-btn,
#tab-import[data-build-role="guest"] #reconfigure-choices-btn,
#tab-import[data-build-role="builder"] #import-btn,
#tab-import[data-build-role="builder"] #update-materials-btn,
#tab-import[data-build-role="builder"] #reconfigure-choices-btn {
  display: none !important;
}
/* Its useful controls have moved into the context bar (see
   relocateToolbar): what would be left here is an empty frame under a bar
   that already says the same name. */
#tab-import[data-build-role] #plan-toolbar {
  display: none !important;
}

/* A chantier is never "emptied" — it's left. Whatever the role, "New plan"
   would exit the same shared worksite the context bar's own "Leave" button
   already exits, under a label that doesn't say so and without asking
   about unsaved changes — two exits fighting for the same job. Only one
   survives inside a build. */
#tab-import[data-build-role] #clear-plan-btn {
  display: none !important;
}
/* Renaming a line is an architect's job (it's the same "Modifier" a chief
   or architect already has from the project view) — a builder or guest
   sees the checkmark without a pencil that would just do nothing for them. */
#tab-import[data-build-role="builder"] .synced-edit-icon,
#tab-import[data-build-role="guest"] .synced-edit-icon {
  display: none;
}

/* ---- Add-a-build dialog ---- */
.project-add-dialog { max-width: 32rem; }
.project-field { display: grid; gap: 0.3rem; margin-bottom: 0.8rem; }
.project-field > span { font-size: 0.85rem; font-weight: 600; }
.project-field-row { display: flex; gap: 0.8rem; align-items: flex-start; }
.project-field-row .project-field { flex: 1; }
.project-field-qty { flex: 0 0 7rem !important; }
.project-field-hint { font-size: 0.79rem; color: var(--muted); margin: -0.5rem 0 0.9rem; line-height: 1.45; }

.project-carry-choice {
  border: 1px solid var(--warn);
  background: var(--warn-soft);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
  margin-bottom: 0.8rem;
}
.project-carry-question { margin: 0 0 0.5rem; font-size: 0.86rem; font-weight: 600; }
.project-carry-option {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.85rem;
  padding: 0.22rem 0;
  cursor: pointer;
}
.project-carry-option input { margin-top: 0.2rem; }

@media (max-width: 700px) {
  .project-metrics { grid-template-columns: 1fr; }
  .build-progress-label { min-width: 6rem; }
  .build-context-bar { flex-direction: column; align-items: stretch; }
  .build-context-right { justify-content: space-between; }
}

/* ---- The material table's project column ----
   "Total" is what one copy costs; this is what the whole line asks for.
   Both are shown because a builder needs both, and the two are told apart
   by weight and by the multiplier printed under the figure. */
.import-table th.project-col,
.import-table td.project-col {
  background: var(--accent-soft);
  white-space: nowrap;
}
.import-table td.project-col strong {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.project-col-mult {
  display: block;
  font-size: 0.72rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}