/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-block-size: 44px; padding: 0 var(--space-5); border-radius: var(--radius-pill);
  border: 1px solid transparent; font-weight: 600; font-size: var(--text-sm);
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-base), box-shadow var(--dur-base);
  text-decoration: none !important; white-space: nowrap; user-select: none;
}
.btn:active { transform: scale(.97); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }
.btn-primary { background: var(--accent); color: var(--accent-contrast); box-shadow: 0 6px 18px rgb(232 62 124 / .28); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-love { background: var(--gradient-love); color: #fff; box-shadow: 0 8px 22px rgb(139 92 246 / .28); }
.btn-secondary { background: var(--surface); border-color: var(--border); color: var(--text); }
.btn-secondary:hover { background: var(--surface-muted); }
.btn-ghost { background: transparent; color: var(--text); }
.btn-ghost:hover { background: var(--surface-muted); }
.btn-danger { background: var(--color-danger); color: #fff; }
.btn-block { inline-size: 100%; }
.btn-sm { min-block-size: 34px; padding: 0 var(--space-3); font-size: var(--text-xs); }
.icon-btn {
  display: inline-grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 50%;
  background: transparent; border: 0; color: var(--text); transition: background var(--dur-base), transform var(--dur-fast);
}
.icon-btn:hover { background: var(--surface-muted); }
.icon-btn:active { transform: scale(.92); }
.icon-btn svg { inline-size: 22px; block-size: 22px; }

/* Forms */
.field { display: flex; flex-direction: column; gap: 6px; }
.label { font-size: var(--text-sm); font-weight: 600; }
.hint { font-size: var(--text-xs); color: var(--text-muted); }
.error { font-size: var(--text-xs); color: var(--color-danger); }
.input, .select, .textarea {
  inline-size: 100%; min-block-size: 46px; padding: 10px 14px; border-radius: var(--radius-md);
  border: 1px solid var(--border); background: var(--surface); transition: border-color var(--dur-base), box-shadow var(--dur-base);
}
.textarea { min-block-size: 96px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.input[aria-invalid="true"] { border-color: var(--color-danger); }
.checkbox { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-sm); }
.checkbox input { inline-size: 20px; block-size: 20px; accent-color: var(--accent); margin-block-start: 2px; }
.switch { position: relative; inline-size: 46px; block-size: 28px; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--ink-300); transition: background var(--dur-base); pointer-events: none; }
.switch span::after { content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; inline-size: 22px; block-size: 22px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-1); transition: transform var(--dur-base) var(--ease-spring); }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { transform: translateX(18px); }
[dir="rtl"] .switch input:checked + span::after { transform: translateX(-18px); }
.switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Cards and surfaces */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-1); }
.card-flat { background: var(--surface-muted); border-radius: var(--radius-lg); padding: var(--space-4); }
.divider { block-size: 1px; background: var(--border); border: 0; margin: 0; }
.list { list-style: none; margin: 0; padding: 0; }
.list-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); min-block-size: 64px; color: var(--text); text-decoration: none !important; border-radius: var(--radius-md); transition: background var(--dur-base); }
a.list-item:hover, button.list-item:hover { background: var(--surface-muted); }
button.list-item { inline-size: 100%; border: 0; background: transparent; text-align: start; }

/* Avatars */
.avatar { position: relative; flex: none; inline-size: var(--size, 48px); block-size: var(--size, 48px); }
.avatar img { inline-size: 100%; block-size: 100%; border-radius: 50%; object-fit: cover; background: var(--surface-muted); }
.avatar .mood { position: absolute; inset-block-end: -2px; inset-inline-end: -4px; font-size: calc(var(--size, 48px) * .34); line-height: 1; background: var(--surface); border-radius: 50%; padding: 2px; box-shadow: var(--shadow-1); }
.avatar.has-feeling img { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--feeling); }
.avatar .dot { position: absolute; inset-block-end: 2px; inset-inline-end: 2px; inline-size: 12px; block-size: 12px; border-radius: 50%; background: var(--color-success); border: 2px solid var(--surface); }

/* Badges and chips */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.badge-count { min-inline-size: 20px; block-size: 20px; justify-content: center; padding: 0 6px; background: var(--accent); color: var(--accent-contrast); }
.chip { display: inline-flex; align-items: center; gap: 6px; min-block-size: 34px; padding: 0 14px; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--border); font-size: var(--text-sm); color: var(--text); transition: background var(--dur-base), transform var(--dur-fast); }
button.chip:hover { background: var(--surface-muted); }
button.chip:active { transform: scale(.96); }
.chip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.verified { color: var(--plum-500); font-size: .9em; }

/* Alerts and toasts */
.alert { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-muted); font-size: var(--text-sm); }
.alert-danger { background: #FEE2E2; color: #991B1B; }
.alert-success { background: #DCFCE7; color: #166534; }
.alert-info { background: var(--accent-soft); color: var(--accent); }
:root[data-theme="dark"] .alert-danger, :root[data-theme="amoled"] .alert-danger { background: #3B1414; color: #FCA5A5; }
.toast-region { position: fixed; inset-inline: 0; inset-block-start: max(12px, env(safe-area-inset-top)); display: grid; justify-items: center; gap: 8px; z-index: 1000; pointer-events: none; padding-inline: 16px; }
.toast { pointer-events: auto; max-inline-size: 420px; padding: 12px 18px; border-radius: var(--radius-pill); background: var(--ink-900); color: #fff; font-size: var(--text-sm); box-shadow: var(--shadow-3); animation: toast-in var(--dur-slow) var(--ease-spring); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-12px) scale(.96); } }

/* Sheets and dialogs */
.sheet-backdrop { position: fixed; inset: 0; background: rgb(18 13 21 / .45); z-index: 900; animation: fade-in var(--dur-base) ease; }
.sheet {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 901; max-block-size: 92dvh; overflow: auto;
  background: var(--surface); border-radius: 24px 24px 0 0; padding: var(--space-4) var(--space-5) max(var(--space-6), env(safe-area-inset-bottom));
  box-shadow: var(--shadow-3); animation: sheet-up var(--dur-slow) var(--ease-out);
}
.sheet::before { content: ""; display: block; inline-size: 40px; block-size: 5px; border-radius: 3px; background: var(--border); margin: 0 auto var(--space-4); }
@media (min-width: 768px) {
  .sheet { inset-inline: 50% auto; inset-block: 50% auto; transform: translate(-50%, -50%); inline-size: min(520px, 92vw); border-radius: 24px; animation: dialog-in var(--dur-slow) var(--ease-out); }
  .sheet::before { display: none; }
}
@keyframes fade-in { from { opacity: 0; } }
@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes dialog-in { from { opacity: 0; transform: translate(-50%, -46%) scale(.97); } }

/* Empty states */
.empty { display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-10) var(--space-6); text-align: center; color: var(--text-muted); }
.empty .emoji { font-size: 56px; line-height: 1; animation: float 3s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-6px); } }

/* Skeleton */
.skeleton { background: linear-gradient(90deg, var(--surface-muted) 25%, var(--surface-sunken) 50%, var(--surface-muted) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--radius-sm); }
@keyframes shimmer { to { background-position: -200% 0; } }

/* Tabs / segmented */
.segmented { display: inline-flex; padding: 4px; background: var(--surface-muted); border-radius: var(--radius-pill); gap: 4px; }
.segmented button { border: 0; background: transparent; padding: 8px 14px; border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 600; color: var(--text-muted); }
.segmented button[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }

/* App lock */
.app-lock { position: fixed; inset: 0; z-index: 5000; display: grid; place-items: center; background: var(--gradient-soft); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); animation: fade-in var(--dur-base); }
.app-lock-inner { display: grid; gap: var(--space-5); justify-items: center; padding: var(--space-6); }
body.app-locked .app-shell { filter: blur(20px); pointer-events: none; user-select: none; }