.muted {
  @apply m-0 mb-4 text-center text-muted;
  font-size: var(--font-sm);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-normal);
}

.field {
  @apply mb-4 block;
}

.field > span {
  @apply mb-2 block;
  font-size: var(--font-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  color: var(--muted-strong);
  line-height: var(--leading-snug);
}

.input {
  @apply h-12 w-full rounded-xl border px-3.5 py-2.5 outline-none;
  background: var(--panel);
  border-color: rgba(74, 103, 150, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
  transition: all var(--dur-fast) var(--ease-smooth);
  font-size: var(--font-base);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
  color: var(--text);
}

select.input {
  @apply py-0 pr-3.5;
  line-height: 1.5;
  appearance: auto;
  -webkit-appearance: auto;
  -moz-appearance: auto;
  background-image: none;
}

input[type='file'].input {
  @apply h-auto min-h-12 px-2.5 py-2 text-sm leading-[1.4];
}

input[type='file'].input::file-selector-button {
  @apply mr-2.5 h-8 cursor-pointer rounded-full border px-3 font-bold;
  background: #eef4ff;
  border-color: #9db8ea;
  color: #1f4ea0;
}

input[type='file'].input::file-selector-button:hover {
  background: #dfeaff;
  border-color: #2f5fd8;
}

.textarea {
  @apply h-auto min-h-28 resize-y;
}

.input:focus {
  border-color: var(--primary);
  background-color: #fbfdff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12), 0 8px 20px rgba(37, 99, 235, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transform: translateY(-1px);
}

.input-readonly {
  @apply bg-slate-100 text-slate-600;
}

.input:disabled {
  @apply cursor-not-allowed border-slate-300 bg-slate-200 text-slate-400;
}

.password-wrap {
  @apply relative;
}

.password-wrap .input {
  @apply pr-11;
}

.input-action-wrap {
  @apply relative;
}

.input-action-wrap .input {
  @apply pr-12;
}

.input-icon-btn {
  @apply absolute right-2 top-1/2 grid h-8 w-8 cursor-pointer place-items-center rounded-full border-0 bg-transparent text-slate-700 transition;
  transform: translateY(-50%);
}

.input-icon-btn:hover:not(:disabled) {
  color: var(--primary);
  background: rgba(37, 99, 235, 0.08);
  transform: translateY(-50%) scale(1.04);
}

.input-icon-btn:disabled {
  @apply cursor-not-allowed text-slate-400;
}

.password-toggle {
  @apply absolute right-2 top-1/2 grid cursor-pointer place-items-center border-0 bg-transparent text-blue-700 transition;
  transform: translateY(-50%);
}

.eye-btn {
  @apply absolute right-2.5 top-1/2 grid h-8 w-8 cursor-pointer place-items-center border-0 bg-transparent text-slate-700 transition;
  transform: translateY(-50%);
}

.password-toggle:hover,
.eye-btn:hover {
  color: var(--primary);
  transform: translateY(-50%) scale(1.04);
}

.btn {
  @apply inline-flex h-9 cursor-pointer items-center justify-center gap-1.5 rounded-full border border-transparent px-4 no-underline;
  font-size: var(--font-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  line-height: 1;
  transition: all var(--dur-fast) var(--ease-smooth);
}

.topbar-actions .btn,
.user-chip,
.side-link,
.mobile-tab {
  @apply relative overflow-hidden;
}

.topbar-actions .btn::before,
.user-chip::before,
.side-link::before,
.mobile-tab::before {
  content: '';
  @apply absolute left-1/2 top-1/2 h-[110px] w-[110px] rounded-full opacity-0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.08) 42%, transparent 72%);
  transform: translate(-50%, -50%) scale(0.68);
  pointer-events: none;
  transition:
    opacity var(--dur-fast) var(--ease-smooth),
    transform var(--dur-medium) var(--ease-out-soft);
}

.topbar-actions .btn:hover::before,
.user-chip:hover::before,
.side-link:hover::before,
.mobile-tab:hover::before {
  opacity: 0;
}

.btn:hover:not(:disabled) {
  transform: translateY(-1px);
  transition-duration: var(--dur-quick);
}

.btn:active:not(:disabled) {
  transform: translateY(0) scale(0.97);
  transition-duration: var(--dur-instant);
}

.btn-icon {
  @apply shrink-0;
}

.btn-icon-spin {
  animation: spin 0.9s linear infinite;
}

.btn.full {
  @apply my-2.5 h-12 w-full;
  font-size: var(--font-md);
  font-weight: 600;
}

.btn-primary {
  @apply text-white;
  background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
  border: 1px solid rgba(37, 99, 235, 0.4);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
}

.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-smooth);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e3a8a 100%);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
}

.btn-primary:hover::before {
  opacity: 1;
}

.btn-primary:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
}

.btn-secondary {
  @apply bg-panel text-brand-strong;
  border: 1px solid rgba(37, 99, 235, 0.22);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.btn-secondary:hover {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-color: rgba(37, 99, 235, 0.40);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15), inset 0 1px 0 rgba(255, 255, 255, 1);
}

.btn-danger {
  @apply bg-white/80 text-danger;
  border-color: rgba(217, 45, 87, 0.28);
}

.btn-danger:hover {
  background: rgba(255, 241, 242, 0.96);
  border-color: rgba(217, 45, 87, 0.38);
}

.btn:disabled {
  @apply cursor-not-allowed border-slate-300 bg-slate-200 text-slate-400;
}

.or {
  @apply text-center;
  font-size: var(--font-sm);
  color: var(--muted);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: 600;
}

.field-help {
  @apply mt-2;
  font-size: var(--font-xs);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-normal);
  color: var(--muted);
}

.check-line-compact {
  @apply mb-0;
}

.auth-support-row {
  @apply -mt-0.5 mb-3 flex items-center justify-between gap-2.5;
}

.auth-link-btn {
  @apply cursor-pointer border-0 bg-transparent p-0 transition;
  font-size: var(--font-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  color: var(--primary-strong);
  line-height: var(--leading-snug);
}

.auth-link-btn:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
  transform: translateX(2px);
}

.auth-link-btn:disabled {
  @apply cursor-not-allowed no-underline;
  color: var(--muted);
}