.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:var(--space-6);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.card.hoverable:hover{
  transform:translateY(-2px); 
  box-shadow:0 8px 30px rgba(2,6,23,.15);
}

.btn, a, .nav-link, .postbtn{
  display:inline-flex; 
  align-items:center; 
  justify-content:center; 
  gap: 10px;
  font-weight:var(--fw-bold);
  padding:.8rem 1.05rem; 
  border-radius:12px; 
  border:1px solid var(--border);
  background:linear-gradient(to bottom right,#fff,#f6f8fb);
  cursor:pointer;
  transition:filter var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  box-shadow:0 1px 0 rgba(2,6,23,.04);
}

.postbtn:hover{
  transform: scale(1.1);
  box-shadow:0 4px 15px rgba(2,6,23,.1);
}

@media (prefers-color-scheme: dark){
  .btn{
    background:linear-gradient(to bottom right,#111b30,#0f182d)
  }
}

.btn:hover
{
  filter:brightness(1.03);
}
.btn:active{
  transform:translateY(1px);
}

.btn:focus-visible{
  outline:none; 
  box-shadow:0 0 0 4px rgba(37,99,235,.25);
}

.btn:disabled{
  opacity:.6; 
  cursor:not-allowed;
}

.btn.primary{
  background:linear-gradient(to bottom right, var(--primary), #1f56c7);
  color:var(--primary-contrast); 
  border-color:transparent;
  box-shadow:0 10px 24px rgba(37,99,235,.28);
}


.btn.primary:hover{
  transform: scale(1.06);
  box-shadow:0 10px 24px rgba(37,99,235,.28);
}

.btn.danger{
  background:linear-gradient(to bottom right, var(--danger), #d03333);
  color:#fff; 
  border-color:transparent;
}

label{
  display:grid; 
  gap:.5rem; 
  font-weight:var(--fw-bold);
}

input, textarea, select{
  width:100%; 
  padding:.85rem 1rem;
  border:1px solid var(--border); 
  border-radius:12px;
  background:var(--surface); 
  color:var(--text);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

textarea{
  min-height:120px; 
  resize:vertical;
}

input::placeholder, textarea::placeholder{
  color:rgba(91,100,116,.75);
}

input:focus, textarea:focus, select:focus{
  outline:none; 
  border-color:#b9c8ff; 
  box-shadow:0 0 0 4px rgba(37,99,235,.18);
}

.form{
  display:grid; 
  gap:var(--space-4);
}

.form .actions{
  display:flex; 
  gap:var(--space-3); 
  align-items:center; 
  justify-content:space-between;
}

.auth-page{
  min-height:100dvh; 
  display:grid; 
  place-items:center; 
  padding-block:var(--space-10);
}

.auth-card{width:min(520px, 100%);
}

.badge{
  display:inline-block; 
  padding:.2rem .6rem; 
  border-radius:999px; 
  background:#eef2ff; 
  border:1px solid var(--border);
}

.link{
  color:var(--primary); 
  text-underline-offset:3px;
}

.link:hover{
  text-decoration:underline;
}


@media (max-width:520px){
  .card{padding:var(--space-5);
  }
  .form .actions{
    flex-direction:column; 
    align-items:stretch;
  }
  .form .actions .btn{
    width:100%;
  }
}

.post-card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:var(--space-6);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  cursor:pointer;
}
.post-card::after{
  content:""; 
  position:absolute; 
  inset:0; 
  border-radius:inherit; 
  pointer-events:none;
  background:linear-gradient(135deg, color-mix(in oklab, var(--primary) 6%, transparent), transparent 65%);
}
.post-card:hover{
  transform:translateY(-2px); 
  box-shadow:0 10px 28px rgba(2,6,23,.14);
}

.post-card h3{
  margin:.25rem 0 .35rem; 
  font-weight:var(--fw-bold);
}

.post-card p{
  color:var(--muted);
}

.post-card .meta{
  display:flex; 
  align-items:center; 
  gap:.5rem; 
  margin-top:.75rem; 
  color:var(--muted); 
  font-size:.92rem;
}

.post-card .dot{width:4px; 
  height:4px; 
  border-radius:50%; 
  background:currentColor; 
  display:inline-block;
}

.profile-hero{
  position:relative; 
  overflow:hidden;
  background:linear-gradient(135deg, color-mix(in oklab, var(--primary) 12%, transparent), transparent 60%), var(--surface);
  border:1px solid var(--border); 
  border-radius:calc(var(--radius) + 4px);
  box-shadow:var(--shadow); 
  padding:var(--space-6);
}

.profile-hero .row{
  display:flex; 
  gap:var(--space-4); 
  align-items:flex-end; 
  flex-wrap:wrap;
}

.profile-hero .avatar{
  width:96px; 
  height:96px; 
  border-radius:50%; 
  object-fit:cover;
  border:3px solid var(--surface); 
  background:#c7d2fe;
}

.profile-hero .handle{
  font-size:clamp(1.2rem,2.2vw,1.6rem); 
  font-weight:var(--fw-bold);
}

.profile-hero .bio{
  color:var(--muted);
}

.profile-hero .actions{
  margin-left:auto; 
  display:flex; 
  gap:.5rem;
}