/* ==========================================================================
   Vizuelni sloj aplikacije: pokret, dubina i prikaz u brend jeziku landinga.
   Boje ostaju iste (navy / narandžasta / krem); ovde je samo forma i animacija.
   ========================================================================== */

:root {
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --shadow-1: 0 1px 2px rgba(3, 24, 43, .06), 0 2px 8px rgba(3, 24, 43, .05);
  --shadow-2: 0 2px 6px rgba(3, 24, 43, .06), 0 14px 32px -8px rgba(3, 24, 43, .22);
}

.ico svg, nav.bottom .ico svg {
  width: 1em; height: 1em; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- prelaz između ekrana ----------
   Samo opacity: transform bi na pretku pokvario position:fixed fioke unutar view-a. */
.main > div { animation: app-view-in .38s ease both; }
@keyframes app-view-in { from { opacity: 0; } }

/* ---------- topbar ---------- */
.topbar { position: relative; background: linear-gradient(100deg, var(--brand-navy) 55%, #0b2a46); border-bottom: 0; }
.topbar::after {
  content: ""; position: absolute; left: 20px; bottom: 0; width: 56px; height: 3px; border-radius: 3px 3px 0 0;
  background: var(--accent); transform-origin: left; animation: app-bar-in .6s var(--ease-out) .1s both;
}
@keyframes app-bar-in { from { transform: scaleX(0); } }
.topbar h1 { font-size: 22px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; animation: app-title-in .5s var(--ease-out) both; }
@keyframes app-title-in { from { opacity: 0; transform: translateY(6px); } }

/* ---------- sidebar ---------- */
.sidebar { background: linear-gradient(180deg, var(--brand-navy), #021222); }
.sidebar-nav-link, .sidebar .brand-link, .sidebar-subnav-link {
  position: relative; transition: background .2s, color .2s, transform .25s var(--ease-out);
}
.sidebar-nav-link:hover, .sidebar .brand-link:hover { transform: translateX(3px); }
.sidebar-nav-link .ico { font-size: 18px; width: 20px; display: grid; place-items: center; flex: none; }
.sidebar-nav-link.active, .sidebar .brand-link.active {
  background: linear-gradient(100deg, var(--accent), #ff8a3d);
  box-shadow: 0 8px 22px -10px rgba(244, 106, 0, .9);
}
.sidebar-nav-link.active::before, .sidebar .brand-link.active::before {
  content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent);
}
.sidebar-subnav-link.active::before {
  content: ""; position: absolute; left: 30px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--accent);
}
.sidebar .section-label { font-family: var(--font-mono); letter-spacing: .16em; font-size: 10.5px; }
.sidebar .logo-mark { transition: transform .5s var(--ease-out); }
.sidebar .logo-link:hover .logo-mark { transform: rotate(-8deg) scale(1.06); }
.sidebar-count { font-variant-numeric: tabular-nums; }

/* ---------- filter chips / dugmad ---------- */
.filter-chip { transition: background .2s, color .2s, border-color .2s, transform .2s var(--ease-out), box-shadow .2s; }
.filter-chip:hover:not(.active) { transform: translateY(-1px); box-shadow: var(--shadow-1); }
.filter-chip.active { box-shadow: 0 4px 10px -6px rgba(3, 24, 43, .55); animation: app-pop .3s var(--ease-spring); }
@keyframes app-pop { 50% { transform: scale(1.06); } }
.scan-btn, .load-more-btn, .details-btn { transition: transform .2s var(--ease-out), box-shadow .2s, opacity .2s, background .2s; }
.scan-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 22px -12px rgba(244, 106, 0, .9); }
.load-more-btn { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.load-more-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-1); }
.counter { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; }

/* ---------- kartice ---------- */
.grid { gap: 16px; }
.card {
  background: #fff; border-color: rgba(3, 24, 43, .08); border-radius: 16px; box-shadow: var(--shadow-1);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .25s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: rgba(244, 106, 0, .35); }
.card:active { transform: translateY(-1px) scale(.985); }
.card .thumb {
  background: radial-gradient(120% 90% at 50% 30%, #fff 0%, #f1f3f5 55%, #e4e8ec 100%);
  isolation: isolate;
}
.card .thumb::after {
  content: ""; position: absolute; left: 18%; right: 18%; bottom: 9%; height: 10%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(3, 24, 43, .22), transparent); transition: transform .45s var(--ease-out), opacity .45s;
}
.card .thumb img { transition: transform .5s var(--ease-out); filter: drop-shadow(0 6px 8px rgba(3, 24, 43, .14)); }
.card:hover .thumb img { transform: scale(1.07) translateY(-3px) rotate(-1.5deg); }
.card:hover .thumb::after { transform: scaleX(.8); opacity: .6; }
.card .brand-tag { font-family: var(--font-mono); font-size: 9px; letter-spacing: .04em; line-height: 1.35; }
.card .name { font-size: 14px; }
.card .rarity-badge { font-family: var(--font-mono); letter-spacing: .06em; backdrop-filter: blur(4px); }
.card .icon-btn { transition: transform .2s var(--ease-spring), color .2s, border-color .2s, background .2s; }
.card .icon-btn:hover { transform: scale(1.1); border-color: var(--brand-navy); }
.card .wishlist-btn.active { animation: app-heart .45s var(--ease-spring); }
@keyframes app-heart { 30% { transform: scale(1.3); } }
.card .details-btn:hover { opacity: 1; box-shadow: 0 8px 18px -10px rgba(244, 106, 0, 1); }

/* kaskadni ulaz kartica; "backwards" da ne pregazi hover transform kad se završi */
.grid > .card, .grid > .series-card, .feed-post { animation: app-card-in .5s var(--ease-out) backwards; }
@keyframes app-card-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.grid > :nth-child(2) { animation-delay: .03s; } .grid > :nth-child(3) { animation-delay: .06s; }
.grid > :nth-child(4) { animation-delay: .09s; } .grid > :nth-child(5) { animation-delay: .12s; }
.grid > :nth-child(6) { animation-delay: .15s; } .grid > :nth-child(7) { animation-delay: .18s; }
.grid > :nth-child(8) { animation-delay: .21s; } .grid > :nth-child(9) { animation-delay: .24s; }
.grid > :nth-child(10) { animation-delay: .27s; } .grid > :nth-child(11) { animation-delay: .3s; }
.grid > :nth-child(n + 12) { animation-delay: .33s; }

.series-card { transition: transform .35s var(--ease-out), box-shadow .35s, border-color .25s; box-shadow: var(--shadow-1); }
.series-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: rgba(244, 106, 0, .35); }

/* ---------- skeleton / učitavanje ---------- */
.sk {
  display: block; border-radius: 8px;
  background: linear-gradient(100deg, #eceff2 30%, #f7f8f9 50%, #eceff2 70%) 0 0 / 200% 100%;
  animation: app-shimmer 1.3s linear infinite;
}
@keyframes app-shimmer { to { background-position: -200% 0; } }
.sk-card { border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid rgba(3, 24, 43, .06); pointer-events: none; }
.sk-card .sk-thumb { aspect-ratio: 1.3; border-radius: 0; }
.sk-card .sk-body { padding: 12px; display: grid; gap: 8px; }
.sk-line { height: 10px; }
.sk-line.w40 { width: 40%; } .sk-line.w60 { width: 60%; } .sk-line.w80 { width: 80%; height: 13px; }
.status.is-loading { display: flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.spinner {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(3, 24, 43, .12); border-top-color: var(--accent);
  animation: app-spin .8s linear infinite; flex: none;
}
@keyframes app-spin { to { transform: rotate(360deg); } }

/* ---------- detalj modela: "pozornica" ---------- */
.detail-image {
  position: relative; isolation: isolate;
  background: radial-gradient(110% 85% at 50% 28%, #fff 0%, #eef1f4 55%, #dfe4e9 100%);
  box-shadow: inset 0 0 0 1px rgba(3, 24, 43, .06);
}
.detail-image img { filter: drop-shadow(0 14px 18px rgba(3, 24, 43, .2)); animation: app-stage-in .8s var(--ease-out) both; transition: transform .6s var(--ease-out); }
.detail-image:hover img { transform: scale(1.04) rotate(-1deg); }
@keyframes app-stage-in { from { opacity: 0; transform: translateX(-30px) scale(.96); } }
.detail-name { animation: app-title-in .55s var(--ease-out) .05s both; }
.stat-grid { border-radius: 14px; box-shadow: var(--shadow-1); background: #fff; }
.stat-cell-link { transition: background .2s, transform .2s var(--ease-out); }
.related-card .thumb { background: radial-gradient(110% 85% at 50% 30%, #fff, #e9edf0); transition: box-shadow .25s, transform .3s var(--ease-out); }
.related-card:hover .thumb { transform: translateY(-3px); }

/* ---------- liste (kolekcionari, rang) ---------- */
.home-leaderboard { border-radius: 14px; box-shadow: var(--shadow-1); background: #fff; }
.home-lb-row { transition: background .2s, padding-left .3s var(--ease-out); animation: app-card-in .45s var(--ease-out) backwards; }
.home-lb-row:hover { background: #fbf7f0; padding-left: 20px; }
.home-lb-row:nth-child(2) { animation-delay: .05s; } .home-lb-row:nth-child(3) { animation-delay: .1s; }
.home-lb-row:nth-child(4) { animation-delay: .15s; } .home-lb-row:nth-child(n + 5) { animation-delay: .2s; }

/* ---------- feed ---------- */
.feed-post { background: #fff; border-color: rgba(3, 24, 43, .08); border-radius: 18px; box-shadow: var(--shadow-1); transition: box-shadow .3s; }
.feed-post:hover { box-shadow: var(--shadow-2); }
.feed-post img { border-radius: 12px; }

/* ---------- modal / bottom sheet / lightbox ---------- */
#conditionOverlay.open { animation: app-fade .25s ease both; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
#conditionOverlay.open .condition-sheet { animation: app-sheet-up .42s var(--ease-out) both; box-shadow: 0 -10px 40px rgba(3, 24, 43, .25); }
@media (min-width: 720px) {
  #conditionOverlay.open .condition-sheet { animation-name: app-sheet-pop; }
}
@keyframes app-fade { from { opacity: 0; } }
@keyframes app-sheet-up { from { transform: translateY(40px); opacity: 0; } }
@keyframes app-sheet-pop { from { transform: translateY(12px) scale(.97); opacity: 0; } }
#lightboxOverlay.open { animation: app-fade .25s ease both; }
#lightboxOverlay.open img { animation: app-zoom .4s var(--ease-out) both; }
@keyframes app-zoom { from { transform: scale(.92); opacity: 0; } }

/* ---------- korisnički badge (desktop) ---------- */
.user-badge { transition: box-shadow .25s, transform .25s var(--ease-out); }
@media (min-width: 721px) {
  .user-badge:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -6px rgba(244, 106, 0, .6); }
}
.user-badge .ub-bell-badge { animation: app-pop .5s var(--ease-spring); }

/* ---------- donji meni (mobilni / PWA): plutajuća kapsula ---------- */
@media (max-width: 719px) {
  nav.bottom {
    left: 10px; right: 10px; bottom: calc(8px + env(safe-area-inset-bottom));
    padding: 6px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 22px;
    background: rgba(3, 24, 43, .94); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
    box-shadow: 0 18px 40px -12px rgba(3, 24, 43, .55); align-items: center;
  }
  nav.bottom button {
    position: relative; color: rgba(242, 237, 226, .6); padding: 7px 4px 6px; border-radius: 16px;
    font-size: 10px; letter-spacing: .04em; text-transform: uppercase; transition: color .25s, background .25s;
  }
  nav.bottom button .ico { font-size: 21px; transition: transform .35s var(--ease-spring); }
  nav.bottom button.active { color: #fff; background: rgba(244, 106, 0, .16); }
  nav.bottom button.active .ico { color: var(--accent); transform: translateY(-1px) scale(1.08); }
  nav.bottom button:active .ico { transform: scale(.88); }
  nav.bottom button[data-view="add"] { color: #fff; }
  nav.bottom button[data-view="add"] .ico {
    width: 46px; height: 46px; margin-top: -24px; margin-bottom: 1px; border-radius: 50%; display: grid; place-items: center; font-size: 22px;
    background: linear-gradient(140deg, #ff8a3d, var(--accent)); box-shadow: 0 10px 22px -6px rgba(244, 106, 0, .85), 0 0 0 5px rgba(3, 24, 43, .94);
  }
  nav.bottom button[data-view="add"].active { background: none; }
  .main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* ---------- izloži garažu (app) ---------- */
.iz-wrap { padding: 18px 20px 40px; max-width: 1100px; }
.iz-intro { margin: 0 0 16px; color: var(--muted); font-size: 15px; }
.iz-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: #fff; box-shadow: var(--shadow-1); margin-bottom: 20px; }
.iz-tab { border: 0; background: none; padding: 10px 18px; border-radius: 999px; font: 600 14px var(--font-display); letter-spacing: .03em; text-transform: uppercase; color: var(--muted); cursor: pointer; transition: background .25s, color .25s; }
.iz-tab.is-active { background: var(--brand-navy); color: #fff; }
.iz-meter { display: grid; gap: 8px; padding: 16px 18px; border-radius: 16px; background: var(--brand-navy); color: #fff; margin-bottom: 10px; }
.iz-meter b { font-family: var(--font-display); font-size: 28px; color: var(--accent); }
.iz-meter span { color: rgba(242, 237, 226, .7); font-size: 13px; margin-left: 6px; }
.iz-meter-bar { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.iz-meter-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #ff8a3d); border-radius: 6px; transition: width .5s var(--ease-out); }
.iz-hint { color: var(--muted); font-size: 13px; margin: 6px 0 16px; }
.iz-h3 { font-family: var(--font-display); text-transform: uppercase; font-size: 18px; letter-spacing: .03em; margin: 26px 0 12px; color: var(--brand-navy); }
.iz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.iz-car {
  position: relative; display: flex; flex-direction: column; text-align: left; padding: 0; border-radius: 16px; overflow: hidden; background: #fff;
  border: 2px solid transparent; box-shadow: var(--shadow-1); font: inherit; color: inherit; transition: transform .3s var(--ease-out), box-shadow .3s, border-color .25s;
  animation: app-card-in .45s var(--ease-out) backwards;
}
.iz-car:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.iz-car.is-on { border-color: var(--accent); box-shadow: 0 12px 26px -12px rgba(244, 106, 0, .8); }
.iz-car-img { position: relative; aspect-ratio: 1.3; background: radial-gradient(120% 90% at 50% 30%, #fff, #e8ecef); overflow: hidden; }
.iz-car-img img { width: 100%; height: 100%; object-fit: cover; }
.iz-car-body { padding: 10px 12px; display: grid; gap: 2px; flex: 1; }
.iz-car-body strong { font-family: var(--font-display); font-size: 15px; line-height: 1.15; }
.iz-car-body span { color: var(--muted); font-size: 12px; }
.iz-flag { position: absolute; left: 8px; top: 8px; padding: 3px 8px; border-radius: 6px; background: var(--accent); color: #fff; font: 600 10px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; animation: app-pop .4s var(--ease-spring); }
.iz-toggle { margin: 0 12px 12px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--brand-navy); background: var(--brand-navy); color: #fff; font: 600 13px var(--font-display); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s, transform .2s var(--ease-out); }
.iz-toggle:active { transform: scale(.97); }
.iz-car.is-on .iz-toggle { background: #fff; color: var(--brand-navy); }
.iz-toggle:disabled { opacity: .6; cursor: wait; }
.iz-pickable { cursor: pointer; }
.iz-pickable[disabled] { cursor: not-allowed; opacity: .75; }
.iz-check { position: absolute; right: 8px; top: 8px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; background: rgba(3, 24, 43, .35); box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transition: background .2s, transform .3s var(--ease-spring); }
.iz-pickable.is-on .iz-check { background: var(--accent); transform: scale(1.1); }
.iz-pickable.is-on .iz-check::after { content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.iz-pickable[disabled] .iz-check { display: none; }
.iz-chip { display: inline-block; padding: 3px 9px; border-radius: 999px; font: 600 10.5px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.iz-car-img .iz-chip { position: absolute; left: 8px; bottom: 8px; }
.iz-chip-wait { background: #fff4e5; color: #9a5300; border: 1px solid #ffd29c; }
.iz-chip-ok { background: #e8f1ff; color: #1d4f9a; border: 1px solid #b9d3ff; }
.iz-chip-live { background: #e7f7ee; color: #1f7a45; border: 1px solid #a9e3c1; }
.iz-chip-done { background: #f0f1f3; color: #5b6570; border: 1px solid #dde1e5; }
.iz-chip-bad { background: #fdecea; color: #a12a1f; border: 1px solid #f5bcb5; }
.iz-choice { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.iz-choice-opt { text-align: left; padding: 16px 18px; border-radius: 16px; border: 2px solid var(--border); background: #fff; cursor: pointer; display: grid; gap: 6px; font: inherit; color: inherit; transition: border-color .2s, box-shadow .2s, transform .2s var(--ease-out); }
.iz-choice-opt b { font-family: var(--font-display); font-size: 17px; text-transform: uppercase; letter-spacing: .03em; }
.iz-choice-opt span { color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.iz-choice-opt:hover { transform: translateY(-2px); }
.iz-choice-opt.is-on { border-color: var(--accent); box-shadow: 0 10px 24px -14px rgba(244, 106, 0, .9); background: #fffaf5; }
.iz-label { display: grid; gap: 6px; margin-top: 18px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.iz-label textarea { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); font: 15px var(--font-body); text-transform: none; letter-spacing: 0; resize: vertical; }
.iz-label textarea:focus { outline: 2px solid var(--accent); border-color: transparent; }
.iz-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.iz-status { font-size: 14px; color: var(--muted); }
.iz-status.is-ok { color: #2e7d32; }
.iz-status.is-err { color: #c62828; }
.iz-list { display: grid; gap: 10px; }
.iz-item { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 10px; border-radius: 16px; background: #fff; box-shadow: var(--shadow-1); animation: app-card-in .4s var(--ease-out) backwards; }
.iz-item-img { width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: var(--bg-soft); }
.iz-item-img img { width: 100%; height: 100%; object-fit: cover; }
.iz-item-txt { display: grid; gap: 3px; min-width: 0; }
.iz-item-txt strong { font-family: var(--font-display); font-size: 16px; }
.iz-item-txt span { font-size: 13px; color: var(--muted); }
.iz-item-txt .iz-place { color: var(--brand-navy); font-weight: 600; }
.iz-item-txt .iz-admin-note { color: #9a5300; }
.iz-item-side { display: grid; gap: 8px; justify-items: end; }
.iz-gate { padding: 36px 24px; border-radius: 20px; background: #fff; box-shadow: var(--shadow-1); text-align: center; }
.iz-gate h3 { margin: 0 0 8px; font-family: var(--font-display); text-transform: uppercase; color: var(--brand-navy); }
.iz-gate p { margin: 0 0 16px; color: var(--muted); }
.iz-gate .iz-row { justify-content: center; }
@media (max-width: 640px) {
  .iz-choice { grid-template-columns: 1fr; }
  .iz-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .iz-item { grid-template-columns: 52px 1fr; }
  .iz-item-img { width: 52px; height: 52px; }
  .iz-item-side { grid-column: 1 / -1; grid-auto-flow: column; justify-content: space-between; align-items: center; }
  .iz-tabs { display: flex; }
  .iz-tab { flex: 1; padding: 10px 8px; font-size: 12.5px; }
}

/* admin: depo red */
.adm-depo-fields { display: grid; grid-template-columns: 1.1fr 1fr 1.3fr; gap: 8px; margin-top: 10px; }
.adm-depo-fields select, .adm-depo-fields input { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); font: 14px var(--font-body); min-width: 0; }
.adm-depo { grid-template-columns: 64px 1fr auto; align-items: start; }
.adm-depo .adm-row-actions { flex-direction: column; align-items: flex-end; }
@media (max-width: 760px) { .adm-depo-fields { grid-template-columns: 1fr; } }

/* ---------- nalozi (admin) + baner za neodobren nalog ---------- */
.acct-banner { margin: 12px 20px 0; padding: 12px 16px; border-radius: 14px; font-size: 14px; line-height: 1.5; animation: app-card-in .4s var(--ease-out) backwards; }
.acct-banner[hidden] { display: none; }
.acct-na_cekanju { background: #fff4e5; border: 1px solid #ffd29c; color: #6b3b00; }
.acct-odbijen, .acct-blokiran { background: #fdecea; border: 1px solid #f5bcb5; color: #7a1d14; }
.main > .acct-banner { animation: none; }
.adm-acc-head { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.adm-acc-stats { display: flex; gap: 8px; flex-wrap: wrap; }
.adm-acc-stat { display: grid; gap: 2px; min-width: 104px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--border); background: #fff; cursor: pointer; text-align: left; font: inherit; transition: border-color .2s, box-shadow .2s, transform .2s var(--ease-out); }
.adm-acc-stat b { font-family: var(--font-display); font-size: 24px; color: var(--brand-navy); line-height: 1; }
.adm-acc-stat span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.adm-acc-stat:hover { transform: translateY(-2px); }
.adm-acc-stat.is-active { border-color: var(--accent); box-shadow: 0 8px 18px -10px rgba(244, 106, 0, .8); }
.adm-acc-stat.is-active b { color: var(--accent); }
.adm-acc-search { flex: 1; min-width: 220px; max-width: 340px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border); font: 15px var(--font-body); }
.adm-acc-search:focus { outline: 2px solid var(--accent); border-color: transparent; }
.adm-acc { display: grid; grid-template-columns: 48px 1fr auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 16px; background: #fff; border: 1px solid var(--border); animation: app-card-in .35s var(--ease-out) backwards; }
.adm-acc.is-pending { border-color: #ffc89c; background: linear-gradient(90deg, #fff8f0, #fff 40%); }
.adm-avatar { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-navy); color: #fff; font: 700 16px var(--font-display); letter-spacing: .04em; }
.adm-avatar.is-admin { background: linear-gradient(140deg, #ff8a3d, var(--accent)); }
.adm-avatar.is-main { background: linear-gradient(140deg, #ffcf6b, #e08a00); box-shadow: 0 0 0 3px #fff, 0 0 0 5px #e9a200; }
.adm-acc-main { min-width: 0; display: grid; gap: 3px; }
.adm-acc-main .adm-row-sub { overflow: hidden; text-overflow: ellipsis; }
.adm-st { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; font: 600 10px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; }
.adm-st-na_cekanju { background: #fff4e5; color: #9a5300; border: 1px solid #ffd29c; }
.adm-st-odobren { background: #e7f7ee; color: #1f7a45; border: 1px solid #a9e3c1; }
.adm-st-odbijen, .adm-st-blokiran { background: #fdecea; color: #a12a1f; border: 1px solid #f5bcb5; }
.adm-st-admin { background: #fff1e5; color: #b14d00; border: 1px solid #ffc89c; }
.adm-st-main { background: #fff6dc; color: #8a5a00; border: 1px solid #f3d27a; }
.adm-acc-actions { flex-wrap: wrap; justify-content: flex-end; }
.adm-muted { font-size: 13px; color: var(--muted); }
.adm-btn-delete { background: #c62828; border-color: #c62828; color: #fff; }
.adm-btn-delete:hover { background: #a31f1f; }
@media (max-width: 640px) {
  .adm-acc { grid-template-columns: 40px 1fr; }
  .adm-avatar { width: 40px; height: 40px; font-size: 14px; }
  .adm-acc-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .adm-acc-stat { min-width: 0; flex: 1 1 40%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}