/* ===== Large Desktop ===== */
@media (min-width: 1400px) {
  .dashboard { grid-template-columns: 320px 1fr 340px; gap: 24px; padding: 28px; }
}

/* ===== Small Desktop ===== */
@media (max-width: 1399px) {
  .dashboard { grid-template-columns: 280px 1fr 300px; }
}

/* ===== Tablet ===== */
@media (max-width: 1199px) {
  .dashboard { grid-template-columns: 280px 1fr; }
  .sidebar--right { display: none; }
  .hero { padding: 32px; }
}

/* ===== Tablet Small ===== */
@media (max-width: 991px) {
  .dashboard { grid-template-columns: 1fr; padding: 20px; gap: 16px; }
  .sidebar--left { position: static; }
  .sidebar--right { display: flex; }

  .topbar__inner { padding: 0 20px; gap: 12px; }
  .nav {
    position: fixed;
    top: var(--topbar-height);
    left: 16px; right: 16px;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    transform: translateY(-20px);
    opacity: 0;
    pointer-events: none;
    transition: var(--transition);
    margin-left: 0;
    gap: 4px;
    z-index: 101;
  }
  .nav.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav__link { padding: 12px 16px; font-size: 1rem; }
  .menu-btn { display: grid; }
  .menu-btn .icon-close { display: none; }
  .menu-btn.active .icon-menu { display: none; }
  .menu-btn.active .icon-close { display: block; }
}

/* ===== Mobile ===== */
@media (max-width: 767px) {
  :root { --topbar-height: 60px; }

  body { padding-bottom: calc(var(--bottom-nav-height) + 16px); }
  .dashboard { padding: 16px; gap: 14px; }
  .sidebar--right { display: none; }
  .bottom-nav { display: flex; }

  .topbar__inner { padding: 0 16px; gap: 10px; }
  .logo { font-size: 1rem; }
  .logo__img { width: 32px; height: 32px; }
  .logo__mark { width: 32px; height: 32px; }
  .hide-mobile { display: none !important; }
  .icon-btn { width: 36px; height: 36px; }

  .hero { padding: 24px 20px; }
  .hero__title { font-size: 1.5rem; margin: 12px 0 10px; }
  .hero__subtitle { font-size: 0.9rem; }
  .hero__stats { gap: 20px; margin-top: 20px; }
  .hero__stat-num { font-size: 1.3rem; }

  .section-head h2 { font-size: 1.15rem; }

  .featured-grid { grid-template-columns: 1fr; gap: 14px; }
  .featured-card { min-height: 240px; }
  .featured-card__overlay { padding: 18px; }
  .featured-card__title { font-size: 1.05rem; }

  .projects-grid { grid-template-columns: 1fr; gap: 14px; }
  .project-card__thumb { height: 160px; }

  .skill-card { padding: 18px; }

  .stats-grid { gap: 8px; }
  .stat-card { padding: 14px 6px; }
  .stat-card__value { font-size: 1.1rem; }

  .profile-card { padding: 22px 16px; }
  .card { padding: 16px; }

  .chip { font-size: 0.72rem; padding: 5px 10px; }
  .btn { padding: 11px 18px; font-size: 0.88rem; }
}

/* ===== Small Mobile ===== */
@media (max-width: 479px) {
  .dashboard { padding: 12px; gap: 12px; }
  .topbar__inner { padding: 0 12px; }
  .logo__text { font-size: 0.95rem; }

  .hero { padding: 20px 16px; }
  .hero__title { font-size: 1.3rem; }

  .card { padding: 14px; }
  .profile-card__avatar,
  .profile-card__avatar--img img,
  .avatar-fallback { width: 72px; height: 72px; font-size: 1.3rem; }

  .project-card__footer { flex-direction: column; align-items: flex-start; gap: 10px; }
  .project-card__actions { width: 100%; }
  .project-card__actions .btn { flex: 1; }

  .footer__inner { padding: 32px 16px 20px; }
}

/* ===== Touch ===== */
@media (hover: none) {
  .featured-card:hover,
  .project-card:hover,
  .stat-card:hover { transform: none; }
}