/* ═══════════════════════════════════════════════════
   MindVault — dizajn sistem "Clay & Books"
   Faza 1: frontend skeleton, mock podaci
   ═══════════════════════════════════════════════════ */

/* ─── Tokeni ─────────────────────────────────────── */
:root {
  --bg: #E7ECF5;
  --clay-light: rgba(255, 255, 255, 0.85);
  --clay-dark: rgba(163, 177, 198, 0.55);
  --text: #3B4258;
  --text-dim: #838CA3;

  /* Pastel paleta: svetla / deep / ink (ink = tekst na svetloj podlozi) */
  --c-green: #BEEBD1;   --c-green-deep: #7FCB9E;   --c-green-ink: #2F6B4A;
  --c-blue: #C3D9FF;    --c-blue-deep: #8FB3F5;    --c-blue-ink: #34506F;
  --c-orange: #FFDDBB;  --c-orange-deep: #F5B067;  --c-orange-ink: #8A5518;
  --c-red: #FFCFCB;     --c-red-deep: #F08E85;     --c-red-ink: #8C3A33;
  --c-purple: #DCD3FF;  --c-purple-deep: #AC9AF2;  --c-purple-ink: #4E3E96;
  --c-teal: #C0F0E8;    --c-teal-deep: #6FCDBE;    --c-teal-ink: #1F6B60;
  --c-yellow: #FFF0BE;  --c-yellow-deep: #F2CD65;  --c-yellow-ink: #7A5B0E;

  /* Clay senke */
  --clay-up: 6px 6px 12px var(--clay-dark), -6px -6px 12px var(--clay-light);
  --clay-up-sm: 3px 3px 6px var(--clay-dark), -3px -3px 6px var(--clay-light);
  --clay-in: inset 2px 2px 5px var(--clay-dark), inset -2px -2px 5px var(--clay-light);
  --clay-in-white: inset 2px 2px 5px rgba(163, 177, 198, 0.45),
                   inset -2px -2px 5px rgba(255, 255, 255, 0.95);

  /* Radijusi */
  --r-card: 22px;
  --r-icon: 12px;
  --r-icon-lg: 14px;
  --r-pill: 100px;
  --r-bar: 28px;

  --gutter: 20px;
}

/* ─── Reset ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

[x-cloak] { display: none !important; }

/* Fokus — vidljiv na svemu interaktivnom */
:focus-visible {
  outline: 3px solid var(--c-blue-ink);
  outline-offset: 3px;
}

/* Sakriven scrollbar na horizontalnim redovima */
.pills,
.books-row {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.pills::-webkit-scrollbar,
.books-row::-webkit-scrollbar { display: none; }

/* ─── Layout ─────────────────────────────────────── */
.app {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 var(--gutter) calc(140px + env(safe-area-inset-bottom));
}

.screen { display: block; }

.section-label {
  margin: 26px 0 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.empty {
  padding: 26px 0;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dim);
}

/* ─── Header ─────────────────────────────────────── */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(18px + env(safe-area-inset-top)) 0 6px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand__mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r-icon);
  background: var(--c-blue);
  box-shadow: var(--clay-up-sm);
  font-size: 15px;
}

.brand__name {
  font-family: "Baloo 2", "Nunito", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ─── Sync indikator ─────────────────────────────── */
.sync-dot {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: var(--clay-up-sm);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.sync-dot:active { box-shadow: var(--clay-in); transform: translateY(1px); }

.sync-dot__core {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--text-dim);
  transition: background 0.2s ease;
}

.sync-dot--synced  .sync-dot__core { background: var(--c-green-deep); }
.sync-dot--offline .sync-dot__core { background: var(--text-dim); }

.sync-dot--syncing .sync-dot__core {
  background: var(--c-orange-deep);
  animation: syncPulse 1.1s ease-in-out infinite;
}

@keyframes syncPulse {
  0%, 100% { opacity: 1;    transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.68); }
}

@media (prefers-reduced-motion: reduce) {
  .sync-dot--syncing .sync-dot__core { animation-duration: 2.4s; }
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-icon-lg);
  background: var(--bg);
  box-shadow: var(--clay-up-sm);
  font-size: 15px;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.icon-btn:active { box-shadow: var(--clay-in); transform: translateY(1px); }

/* ─── Filter pilule ──────────────────────────────── */
.pills {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  padding: 8px var(--gutter) 12px;
  margin: 6px calc(var(--gutter) * -1) 0;
}

.pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 15px;
  border-radius: var(--r-pill);
  background: var(--bg);
  box-shadow: var(--clay-up-sm);
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text-dim);
  white-space: nowrap;
  transition: box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.pill.is-active {
  background: var(--c-blue);
  color: var(--c-blue-ink);
  box-shadow: inset 2px 2px 5px var(--c-blue-deep),
              inset -2px -2px 5px rgba(255, 255, 255, 0.9);
}

/* ─── Knjige ─────────────────────────────────────── */
.books-row {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 6px var(--gutter) 14px;
  margin: 0 calc(var(--gutter) * -1);
}

.book {
  flex: 0 0 auto;
  width: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.book__visual {
  position: relative;
  display: block;
  width: 96px;
  height: 116px;
  transition: transform 0.2s ease;
}
.book:hover .book__visual { transform: translateY(-2px); }
.book:active .book__visual { transform: translateY(1px); }

/* Sloj listova IZA korice */
.book__pages {
  position: absolute;
  top: 6px;
  left: 12px;
  width: 84px;
  height: 108px;
  background: #FBFCFE;
  border-radius: 10px;
  box-shadow: 2px 3px 6px rgba(163, 177, 198, 0.45);
}
.book__pages::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  right: 0;
  width: 7px;
  border-radius: 0 10px 10px 0;
  background: repeating-linear-gradient(180deg, #E4E8F0 0 2px, #FBFCFE 2px 4px);
}

/* Korica */
.book__cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 90px;
  height: 112px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 8px 8px 14px;
  border-radius: var(--r-icon);
  background: var(--tone);
  box-shadow: 4px 6px 10px var(--clay-dark), -4px -4px 10px var(--clay-light);
}
/* Spine crease */
.book__cover::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 10px;
  width: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.5);
}

.book__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: inset 2px 2px 5px var(--tone-deep),
              inset -2px -2px 5px rgba(255, 255, 255, 0.9);
  font-size: 16px;
}

.book__title {
  font-family: "Baloo 2", "Nunito", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--tone-ink);
}

.book__ribbon {
  position: absolute;
  top: -3px;
  right: 14px;
  width: 10px;
  height: 22px;
  background: var(--tone-deep);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
}

.book__count {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
}

/* Nova knjiga */
.book__visual--add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 90px;
  height: 112px;
  margin: 0 3px;
  border: 2px dashed rgba(131, 140, 163, 0.5);
  border-radius: var(--r-icon);
  color: var(--text-dim);
}

.book__plus {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}

.book__addlabel {
  font-size: 10.5px;
  font-weight: 800;
}

/* ─── Grid kartica ───────────────────────────────── */
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 128px;
  padding: 14px;
  border-radius: var(--r-card);
  background: var(--card-bg, var(--bg));
  box-shadow: var(--clay-up);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.card:hover { transform: translateY(-2px); }

.card.wide {
  grid-column: span 2;
  flex-direction: row;
  align-items: center;
  gap: 14px;
}

.card__badge {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-icon);
  background: #fff;
  box-shadow: var(--clay-in-white);
  font-size: 16px;
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 auto;
  min-width: 0;
}

.card__title {
  font-family: "Baloo 2", "Nunito", sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--card-ink, var(--text));
}

.card__sub {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
}

.card__date {
  margin-top: auto;
  padding-top: 8px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
}
.card.wide .card__date { padding-top: 4px; }

/* Boja kartice po TIPU sadržaja */
.card--notes     { --card-bg: var(--c-green);  --card-ink: var(--c-green-ink); }
.card--checklist { --card-bg: var(--c-blue);   --card-ink: var(--c-blue-ink); }
.card--voice     { --card-bg: var(--c-orange); --card-ink: var(--c-orange-ink); }
.card--pdf       { --card-bg: var(--c-teal);   --card-ink: var(--c-teal-ink); }
.card--image     { --card-bg: var(--c-blue);   --card-ink: var(--c-blue-ink); }
.card--drawing   { --card-bg: #fff;            --card-ink: var(--text); }
.card--link      { --card-bg: var(--c-purple); --card-ink: var(--c-purple-ink); }

/* ─── Ekran 2: otvorena knjiga ───────────────────── */
.back {
  display: inline-block;
  margin: 14px 0 4px;
  font-size: 13px;
  font-weight: 800;
  color: var(--text-dim);
}

.hero {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 12px 0 2px;
}

.hero__cover {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 64px;
  height: 78px;
  border-radius: var(--r-icon-lg);
  background: var(--tone);
  box-shadow: 4px 6px 10px var(--clay-dark), -4px -4px 10px var(--clay-light);
}
.hero__cover::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 10px;
  width: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.5);
}

.hero__icon {
  margin-left: 10px;
  font-size: 22px;
}

.hero__title {
  font-family: "Baloo 2", "Nunito", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--tone-ink);
}

.hero__sub {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
}

/* ─── Floating toolbar ───────────────────────────── */
.toolbar {
  position: fixed;
  left: var(--gutter);
  right: var(--gutter);
  bottom: calc(22px + env(safe-area-inset-bottom));
  z-index: 20;
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4px;
  padding: 10px 12px;
  border-radius: var(--r-bar);
  background: #fff;
  box-shadow: 8px 10px 22px rgba(163, 177, 198, 0.6),
              -6px -6px 16px rgba(255, 255, 255, 0.9);
}

.tool {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.tool__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-icon-lg);
  background: var(--bg);
  box-shadow: var(--clay-up-sm);
  font-size: 15px;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.tool:active .tool__icon { box-shadow: var(--clay-in); transform: translateY(1px); }

.tool__label {
  font-size: 9.5px;
  font-weight: 800;
  color: var(--text-dim);
  white-space: nowrap;
}

.tool--primary .tool__icon {
  background: var(--c-blue-deep);
  color: #fff;
  box-shadow: 3px 3px 7px rgba(120, 150, 210, 0.55),
              -2px -2px 6px rgba(255, 255, 255, 0.85);
}
.tool--primary .tool__label { color: var(--c-blue-ink); }

/* ─── Tonovi (boja knjige) ───────────────────────── */
.tone-green  { --tone: var(--c-green);  --tone-deep: var(--c-green-deep);  --tone-ink: var(--c-green-ink); }
.tone-blue   { --tone: var(--c-blue);   --tone-deep: var(--c-blue-deep);   --tone-ink: var(--c-blue-ink); }
.tone-orange { --tone: var(--c-orange); --tone-deep: var(--c-orange-deep); --tone-ink: var(--c-orange-ink); }
.tone-red    { --tone: var(--c-red);    --tone-deep: var(--c-red-deep);    --tone-ink: var(--c-red-ink); }
.tone-purple { --tone: var(--c-purple); --tone-deep: var(--c-purple-deep); --tone-ink: var(--c-purple-ink); }
.tone-teal   { --tone: var(--c-teal);   --tone-deep: var(--c-teal-deep);   --tone-ink: var(--c-teal-ink); }
.tone-yellow { --tone: var(--c-yellow); --tone-deep: var(--c-yellow-deep); --tone-ink: var(--c-yellow-ink); }

/* ─── Desktop ────────────────────────────────────── */
@media (min-width: 769px) {
  body { font-size: 16px; }

  .grid { grid-template-columns: repeat(4, 1fr); }
  .card.wide { grid-column: span 2; }

  .books-row {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  .toolbar { max-width: 560px; }
}

/* ─── Reduced motion ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .book:hover .book__visual,
  .card:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════
   FAZA 2 — modal, editor, context meni, toast, korpa
   Isti jezik: clay senke, pastelna paleta, Baloo/Nunito.
   ═══════════════════════════════════════════════════ */

/* Tip stavke u bazi je "note" (jednina) — ista zelena kao "notes" */
.card--note { --card-bg: var(--c-green); --card-ink: var(--c-green-ink); }

.card { cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* ─── Dugmad ─────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 18px;
  border-radius: var(--r-pill);
  background: var(--bg);
  box-shadow: var(--clay-up-sm);
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.btn:active { box-shadow: var(--clay-in); transform: translateY(1px); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn[disabled]:active { box-shadow: var(--clay-up-sm); transform: none; }

.btn--primary { background: var(--c-blue-deep); color: #fff; }
.btn--danger  { background: var(--c-red); color: var(--c-red-ink); }
.btn--ghost   { background: transparent; box-shadow: none; color: var(--text-dim); }
.btn--ghost:active { box-shadow: none; }
.btn--sm { padding: 7px 13px; font-size: 11.5px; }

/* ─── Clay input polja (utisnuta u pozadinu) ─────── */
.field {
  display: block;
  width: 100%;
  padding: 13px 16px;
  border: 0;
  border-radius: var(--r-icon-lg);
  background: var(--bg);
  box-shadow: var(--clay-in);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  outline: none;
}
.field::placeholder { color: var(--text-dim); font-weight: 600; }
.field:focus-visible { outline: 3px solid var(--c-blue-ink); outline-offset: 2px; }

.field--title {
  font-family: "Baloo 2", "Nunito", sans-serif;
  font-size: 18px;
  font-weight: 700;
}

.field--body {
  min-height: 40vh;
  resize: vertical;
  line-height: 1.6;
}

.field--select {
  appearance: none;
  padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%),
                    linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
  background-position: calc(100% - 18px) 20px, calc(100% - 13px) 20px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* ─── Traka za pretragu ──────────────────────────── */
.searchbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 2px;
  animation: fadeDown 0.2s ease;
}
.searchbar .field--search { flex: 1 1 auto; }

@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ─── Settings meni ──────────────────────────────── */
.menu-anchor { position: relative; }

.menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  min-width: 152px;
  padding: 6px;
  border-radius: 18px;
  background: var(--bg);
  box-shadow: var(--clay-up);
  animation: popIn 0.16s ease;
}

.menu__item {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.menu__item:hover { background: rgba(255, 255, 255, 0.6); }

/* ─── Context meni ───────────────────────────────── */
.ctx {
  position: fixed;
  z-index: 60;
  min-width: 184px;
  padding: 6px;
  border-radius: 20px;
  background: var(--bg);
  box-shadow: var(--clay-up);
  animation: popIn 0.16s ease;
}

.ctx__item {
  display: block;
  width: 100%;
  padding: 11px 13px;
  border-radius: 14px;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.15s ease;
}
.ctx__item:hover { background: rgba(255, 255, 255, 0.65); }
.ctx__item--danger { color: var(--c-red-ink); }

@keyframes popIn {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: none; }
}

/* ─── Bottom sheet ───────────────────────────────── */
.sheet-wrap {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(59, 66, 88, 0.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fadeIn 0.22s ease;
}

.sheet {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: 88vh;
  overflow-y: auto;
  padding: 12px var(--gutter) calc(24px + env(safe-area-inset-bottom));
  border-radius: 28px 28px 0 0;
  background: var(--bg);
  box-shadow: 0 -10px 30px rgba(163, 177, 198, 0.65),
              inset 0 1px 0 rgba(255, 255, 255, 0.9);
  animation: sheetUp 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.sheet__grab {
  display: block;
  width: 44px;
  height: 5px;
  margin: 0 auto 14px;
  border-radius: 3px;
  background: var(--clay-dark);
}

.sheet__title {
  margin-bottom: 16px;
  font-family: "Baloo 2", "Nunito", sans-serif;
  font-size: 18px;
  font-weight: 700;
}

.sheet__label {
  display: block;
  margin: 18px 0 8px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.sheet__title + .sheet__label { margin-top: 0; }
.sheet__label .req { color: var(--c-red-deep); }
.sheet__label .opt { text-transform: none; letter-spacing: 0; font-weight: 700; opacity: 0.7; }

.sheet__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
}

@keyframes sheetUp {
  from { transform: translateY(100%); }
  to   { transform: none; }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ─── Color picker ───────────────────────────────── */
.colors {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.color {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--tone);
  box-shadow: var(--clay-up-sm);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.color:hover { transform: translateY(-1px); }
.color.is-sel {
  transform: none;
  box-shadow: inset 3px 3px 6px var(--tone-deep),
              inset -3px -3px 6px rgba(255, 255, 255, 0.95);
}

/* ─── Icon picker ────────────────────────────────── */
.icons {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

.icon-tile {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--r-icon);
  background: var(--bg);
  box-shadow: var(--clay-up-sm);
  font-size: 18px;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.icon-tile:hover { transform: translateY(-1px); }
.icon-tile.is-sel {
  transform: none;
  background: var(--c-blue);
  box-shadow: inset 2px 2px 5px var(--c-blue-deep),
              inset -2px -2px 5px rgba(255, 255, 255, 0.9);
}

/* ─── Izbor tipa stavke ──────────────────────────── */
.types {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.type-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 8px;
  border-radius: var(--r-card);
  background: var(--card-bg, var(--bg));
  box-shadow: var(--clay-up);
  transition: transform 0.18s ease;
}
.type-tile:hover { transform: translateY(-2px); }

.type-tile__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-icon);
  background: #fff;
  box-shadow: var(--clay-in-white);
  font-size: 18px;
}

.type-tile__label {
  font-size: 12px;
  font-weight: 800;
  color: var(--card-ink, var(--text));
}

/* ─── Lista knjiga za premeštanje ────────────────── */
.move-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.move-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--r-icon-lg);
  background: var(--bg);
  box-shadow: var(--clay-up-sm);
  font-size: 13.5px;
  font-weight: 700;
  text-align: left;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.move-row:active { box-shadow: var(--clay-in); transform: translateY(1px); }

.move-row__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--tone, #fff);
  box-shadow: var(--clay-up-sm);
  font-size: 14px;
}

/* Dugme "⋯" u hero traci ide skroz desno */
.hero .icon-btn { margin-left: auto; }

/* ─── Editor ─────────────────────────────────────── */
.editor { padding-bottom: 40px; }

.editor__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.saved-flag {
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--c-green);
  box-shadow: var(--clay-up-sm);
  font-size: 11px;
  font-weight: 800;
  color: var(--c-green-ink);
}

.editor__kind {
  margin: 4px 0 14px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.editor .field { margin-bottom: 14px; }

.editor__move {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
}

.editor__movelabel {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 800;
  color: var(--text-dim);
}
.editor__move .field { margin-bottom: 0; }

/* ─── Checklist ──────────────────────────────────── */
.chk-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 14px;
}

.chk {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chk__box {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--bg);
  box-shadow: var(--clay-up-sm);
  font-size: 14px;
  font-weight: 800;
  color: transparent;
  transition: box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.chk__box.is-done {
  background: var(--c-green);
  color: var(--c-green-ink);
  box-shadow: inset 2px 2px 5px var(--c-green-deep),
              inset -2px -2px 5px rgba(255, 255, 255, 0.9);
}

.chk__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 14px;
  border: 0;
  border-radius: var(--r-icon-lg);
  background: var(--bg);
  box-shadow: var(--clay-in);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  outline: none;
}
.chk__input.is-done { text-decoration: line-through; color: var(--text-dim); }
.chk__input:focus-visible { outline: 3px solid var(--c-blue-ink); outline-offset: 2px; }

.chk__del {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 800;
  color: var(--text-dim);
  transition: background 0.15s ease, color 0.15s ease;
}
.chk__del:hover { background: var(--c-red); color: var(--c-red-ink); }

/* ─── Korpa ──────────────────────────────────────── */
.trash-note {
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
}

.trash-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.trash-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--r-card);
  background: var(--bg);
  box-shadow: var(--clay-up);
}

.trash-row__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
  flex: 0 0 auto;
}

/* ─── Prazna stanja ──────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 36px 20px;
  text-align: center;
}

.empty-state__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: var(--clay-up);
  font-size: 26px;
}

.empty-state__text {
  max-width: 30ch;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-dim);
}

/* ─── Toast ──────────────────────────────────────── */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(112px + env(safe-area-inset-bottom));
  z-index: 90;
  transform: translateX(-50%);
  max-width: calc(100% - 40px);
  padding: 11px 20px;
  border-radius: var(--r-pill);
  background: #fff;
  box-shadow: 6px 8px 18px rgba(163, 177, 198, 0.65),
              -4px -4px 12px rgba(255, 255, 255, 0.9);
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: toastUp 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes toastUp {
  from { opacity: 0; transform: translate(-50%, 16px); }
  to   { opacity: 1; transform: translateX(-50%); }
}

/* Sync toast nosi dugme i drugi red — mora da sme da diše */
.toast--rich {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px 12px 20px;
  border-radius: 22px;
  white-space: normal;
  text-align: left;
}

.toast__text { display: block; }

.toast__sub {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-dim);
}

.toast__btn {
  flex: 0 0 auto;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: var(--c-blue-deep);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: var(--clay-up-sm);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.toast__btn:active { box-shadow: var(--clay-in); transform: translateY(1px); }

/* ─── Desktop: dodaci ────────────────────────────── */
@media (min-width: 769px) {
  .icons { grid-template-columns: repeat(8, 1fr); }
  .trash-row { padding: 14px 18px; }
}