/* ============================================================
   ZYORA — iOS polish layer
   Adds Apple-style translucency, softer radii, and touch feel.
   Load LAST (after components.css).
   ============================================================ */

:root {
  --ios-blur: 22px;
  --ios-surface:        color-mix(in srgb, var(--surface) 82%, transparent);
  --ios-surface-solid:  var(--surface);
  --ios-surface-2:      color-mix(in srgb, var(--surface-2) 85%, transparent);
  --ios-line:           var(--border);
  --ios-text:           var(--text);
  --ios-muted:          var(--text-muted);
}

/* ---------- Body atmosphere ---------- */
body {
  background:
    radial-gradient(circle at 15% -10%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 32rem),
    radial-gradient(circle at 100% 0%,   color-mix(in srgb, var(--info) 6%, transparent),   transparent 30rem),
    var(--bg);
  background-attachment: fixed;
}

/* ---------- Topbar ---------- */
.topbar {
  background: color-mix(in srgb, var(--ios-surface-solid) 72%, transparent) !important;
  backdrop-filter: blur(var(--ios-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--ios-blur)) saturate(160%);
  border-bottom-color: var(--ios-line) !important;
}
.topbar .icon-btn,
.topbar .avatar-btn,
.topbar .avatar {
  width: 34px !important;
  height: 34px !important;
  border-radius: var(--r-md) !important;
  border: 1px solid var(--ios-line) !important;
  background: color-mix(in srgb, var(--ios-surface-solid) 70%, transparent) !important;
}
.topbar .icon-btn:hover { transform: translateY(-1px); }

/* ---------- Cards ---------- */
.card {
  background: var(--ios-surface) !important;
  border: 1px solid var(--ios-line) !important;
  box-shadow: 0 6px 24px rgba(20, 23, 33, 0.045) !important;
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}
.card:hover { border-color: color-mix(in srgb, var(--accent) 24%, var(--ios-line)) !important; }

/* ---------- Buttons ---------- */
.btn {
  min-height: 42px !important;
  border-radius: var(--r-md) !important;
  font-weight: var(--fw-semibold) !important;
}
.btn--primary { background: var(--text) !important; color: var(--bg) !important; }
.btn--primary:hover { opacity: 0.9; }

/* ---------- Inputs ---------- */
.input, .select, .textarea {
  min-height: 44px !important;
  border-radius: var(--r-md) !important;
  border-color: var(--ios-line) !important;
  background: var(--ios-surface-solid) !important;
}
.input:focus, .select:focus, .textarea:focus {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--ios-line)) !important;
  box-shadow: 0 0 0 4px var(--focus-ring) !important;
}

/* ---------- Bottom nav ---------- */
.bottom-nav {
  background: color-mix(in srgb, var(--ios-surface-solid) 74%, transparent) !important;
  border: 1px solid var(--ios-line) !important;
  border-radius: var(--r-2xl) !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.12) !important;
}
html[data-theme="dark"] .bottom-nav {
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.38) !important;
}
.bottom-nav__link {
  border-radius: var(--r-lg) !important;
  font-weight: var(--fw-semibold) !important;
}

/* ---------- Tabs ---------- */
.tabs {
  background: var(--ios-surface) !important;
  border: 1px solid var(--ios-line) !important;
  border-radius: var(--r-lg) !important;
  padding: 4px !important;
}
.tab {
  min-height: 36px !important;
  border-radius: var(--r-sm) !important;
}
.tab.is-active, .tab.active {
  background: var(--ios-surface-solid) !important;
  box-shadow: var(--sh-xs) !important;
}

/* ---------- Entry animation ---------- */
@keyframes ios-in {
  from { opacity: 0; transform: translateY(6px) scale(0.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.card, .stat, .bot-row, .be-card, .set-card, .prof-card, .bil-card, .ad-card, .ab-card {
  animation: ios-in 0.32s var(--ease) both;
}

@media (prefers-reduced-motion: reduce) {
  .card, .stat, .bot-row, .be-card, .set-card, .prof-card, .bil-card, .ad-card, .ab-card {
    animation: none;
  }
}

/* ---------- Safe area ---------- */
@supports (padding: max(0px)) {
  .bottom-nav { bottom: max(10px, env(safe-area-inset-bottom)); }
  .site-footer { padding-bottom: max(var(--sp-8), env(safe-area-inset-bottom)); }
}