.auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; max-width: 1000px; margin: 0 auto; align-items: start; }
.auth-box { background: white; padding: 3rem; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.register-box { background-color: var(--bg-light); }
.box-title { font-family: var(--font-heading); font-size: 2rem; margin-bottom: 0.5rem; }
.box-desc { color: var(--secondary); margin-bottom: 2rem; }
.row-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }

.profile-layout { display: grid; grid-template-columns: 280px 1fr; gap: 3rem; }
.user-card { background: white; border: 1px solid var(--border); padding: 2rem; text-align: center; border-radius: var(--radius); margin-bottom: 1.5rem; }
.user-avatar { width: 80px; height: 80px; background: var(--primary); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto 1rem auto; font-family: var(--font-heading); }
.user-email { color: var(--secondary); font-size: 0.9rem; margin-bottom: 2rem; word-break: break-all; }
.user-menu { text-align: left; display: flex; flex-direction: column; gap: 5px; margin-top: 2rem; }
.menu-link { padding: 12px 15px; border-radius: 4px; color: var(--secondary); font-size: 0.9rem; display: flex; align-items: center; gap: 10px; font-weight: 500; }
.menu-link:hover { background: var(--bg-light); color: var(--primary); }
.menu-link.active { background: var(--bg-light); color: var(--primary); font-weight: 700; border-left: 3px solid var(--primary); }
.menu-link.logout:hover { background: #fff5f5; color: #e74c3c; }
.info-box { background: var(--bg-light); padding: 1.5rem; border-radius: var(--radius); text-align: center; font-size: 0.9rem; color: var(--secondary); }
.info-box i { font-size: 1.5rem; color: var(--primary); margin-bottom: 10px; display: block; }

.order-card { background: white; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 1.5rem; overflow: hidden; transition: 0.3s; }
.order-header { background: var(--bg-light); padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.order-body { padding: 1.5rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); }
.order-items-preview { display: flex; gap: 10px; overflow-x: auto; }
.mini-item { position: relative; width: 60px; height: 60px; border: 1px solid var(--border); border-radius: 4px; padding: 2px; flex-shrink: 0; }
.mini-item img { width: 100%; height: 100%; object-fit: cover; }
.qty-badge { position: absolute; top: -5px; right: -5px; background: var(--primary); color: white; font-size: 0.6rem; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid white; }
.order-total { text-align: right; }
.order-footer { padding: 1rem 1.5rem; display: flex; justify-content: space-between; align-items: center; background: white; }

@media (max-width: 900px) {
    .profile-layout { grid-template-columns: 1fr !important; gap: 3rem; display: block; }
    .row-inputs { grid-template-columns: 1fr; }
}
profile.css