@layer components {
  /* Buttons */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:10px 14px; border-radius:var(--radius); border:1px solid var(--border);
    background:#f6f6f6; color:#111; cursor:pointer; white-space:nowrap; text-align:center;
    transition:filter .15s, background .15s, transform .05s; user-select:none;
  }
  .btn:hover{ background:#5f17cba6; color: #fff; }
  .btn:active{ transform:translateY(1px); }
  .btn:disabled{ opacity:.6; cursor:not-allowed; }
  .btn--primary{     background: #5e17cb;
    border-color: #5e17cb;
    color: #fff;
    font-weight: 700;
}
  .btn--outline {
    background: #f6f6f6;
    color: #000;
    border: 1px solid rgba(0, 0, 0, .25);
}
  .btn--danger{ background:var(--color-danger); border-color:var(--color-danger); color:#fff; }
  .btn--success{ background:var(--color-success); border-color:var(--color-success); color:#fff; }
  .btn--warning{ background:var(--color-warning); border-color:var(--color-warning); color:#fff; }
  .btn--icon{ padding:6px 10px; border-radius:10px; background:#f6f7fb; }
  .btn--lg{ padding:12px 16px; min-width:230px; }
  .button-group{ display:flex; gap:8px; justify-content:center; align-items:center; flex-wrap:nowrap; }
  .button-group .btn{ flex:1 1 auto; min-width:0; }

  /* Forms */
  .form{ display:grid; gap:12px; }
  .form-row{ display:grid; gap:12px; } @media (min-width:768px){ .form-row{ grid-template-columns:1fr 1fr; } }
  .label{ font-size:var(--fs-100); color:var(--text-muted); }
  .input,.textarea,.select{
    width:100%; border:1px solid var(--border); border-radius:var(--radius); background:#fff;
    color:var(--text); padding:10px 12px; transition:border-color .2s, box-shadow .2s, background .2s;
  }
  .textarea{ min-height:120px; resize:vertical; }
  .input:focus,.textarea:focus,.select:focus{ outline:none; border-color: #5e17cb; box-shadow:0 0 0 3px rgba(212,0,109,.12); }
  .input.is-error,.textarea.is-error,.select.is-error{ border-color:var(--color-danger); box-shadow:0 0 0 3px rgba(239,68,68,.15); }
  .form-message{ font-size:14px; color:var(--text-muted); }
  .form-message.success{ color:#0a7a33; } .form-message.error{ color:#b91c1c; }
  .auth-form{ display:grid; gap:10px; max-width:560px; margin:24px auto; }
  .auth-card{ max-width:560px; margin:24px auto; padding:16px; background:#fff; border:1px solid var(--border); border-radius:var(--radius); }
  .auth-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:8px; }

  /* Cards */
  .card{ background:#fff; border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-1); overflow:hidden; display:flex; flex-direction:column; }
  .card__header{ padding:var(--space-5) var(--space-6); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); }
  .card__title{ font-size:var(--fs-300); font-weight:600; color:var(--text); }
  .card__body{ padding:var(--space-6); }
  .card__footer{ padding:var(--space-5) var(--space-6); border-top:1px solid var(--border); background:var(--surface-2); }

  .profile-card{ width:100%; max-width:450px; margin:0 auto; padding:16px; border:1px solid var(--border); border-radius:16px; background:#fff; box-shadow:0 4px 18px rgba(0,0,0,.04); text-align:center; }
  .profile-card .actions{ margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }

  .flirt-card{
    width:350px; max-width:100%; margin-top:14px;
    background:linear-gradient(180deg,#fff 0%, #f8fbff 100%);
    border:1px solid #dbeafe; border-radius:12px; box-shadow:0 6px 18px rgba(37,99,235,.06);
    padding:12px 14px; min-height:120px; transition:box-shadow .2s, transform .08s;
  }
  .flirt-card:hover{ box-shadow:0 10px 22px rgba(37,99,235,.10); transform:translateY(-1px); }
  .flirt-card-title{ font-size:15px; font-weight:700; margin:0; color:#0f172a; display:flex; align-items:center; gap:8px; }
  .flirt-card-title::before{ content:"💬"; font-size:16px; }
}