:root {
	--zup-blue: #2563EB;
	--zup-sky: #38BDF8;
	--zup-mint: #14B8A6;
	--zup-yellow: #FBBF24;
	--zup-bg: #F8FAFC;
	--zup-surface: #FFFFFF;
	--zup-text: #172033;
	--zup-muted: #64748B;
	--zup-border: #E2E8F0;
	--zup-danger: #DC2626;
	--zup-radius: 18px;
	--zup-shadow: 0 10px 30px rgba(23, 32, 51, .08);
}

.zupbox-shell, .zupbox-profile { max-width: 1180px; margin: 0 auto; padding: 32px 20px 64px; color: var(--zup-text); }
.zupbox-card { background: var(--zup-surface); border: 1px solid var(--zup-border); border-radius: var(--zup-radius); padding: 24px; box-shadow: var(--zup-shadow); }
.zupbox-grid { display: grid; gap: 20px; }
.zupbox-grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.zupbox-hero { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:34px; margin-bottom:24px; border-radius:24px; background: linear-gradient(135deg, #EFF6FF, #F0FDFA); border:1px solid var(--zup-border); }
.zupbox-kicker { font-size:12px; font-weight:800; letter-spacing:.12em; color:var(--zup-blue); margin-bottom:7px; }
.zupbox-hero h1, .zupbox-page-heading h1 { margin:0 0 8px; font-size:clamp(30px,4vw,48px); line-height:1.05; }
.zupbox-hero p, .zupbox-page-heading p { margin:0; color:var(--zup-muted); font-size:16px; }
.zupbox-icon { font-size:30px; margin-bottom:12px; }
.zupbox-card h2, .zupbox-card h3 { margin-top:0; }
.zupbox-card a { color:var(--zup-blue); text-decoration:none; font-weight:700; }
.zupbox-muted { color:var(--zup-muted); }
.zupbox-button { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:42px; padding:9px 16px; border:1px solid var(--zup-border); border-radius:12px; background:#fff; color:var(--zup-text) !important; text-decoration:none; font-weight:800; cursor:pointer; box-sizing:border-box; }
.zupbox-button:hover { transform:translateY(-1px); box-shadow:0 5px 14px rgba(23,32,51,.08); }
.zupbox-button-primary { border-color:var(--zup-blue); background:var(--zup-blue); color:#fff !important; }
.zupbox-button-danger { color:var(--zup-danger) !important; }
.zupbox-inline-form { display:inline-block; margin:0; }
.zupbox-pill { display:inline-flex; padding:8px 12px; border-radius:999px; background:#EFF6FF; color:var(--zup-blue); font-weight:800; font-size:13px; }
.zupbox-page-heading { display:flex; justify-content:space-between; gap:20px; align-items:end; margin-bottom:24px; }
.zupbox-auth-wrap { max-width:480px; margin:70px auto; padding:20px; }
.zupbox-auth-card { padding:36px; }
.zupbox-logo { display:inline-block; font-size:28px; font-weight:900; letter-spacing:-.05em; color:var(--zup-blue); margin-bottom:20px; }
.zupbox-form label, .zupbox-auth-card label { display:block; font-weight:800; font-size:14px; margin-bottom:16px; }
.zupbox-form input, .zupbox-form textarea, .zupbox-auth-card input, .zupbox-search input { width:100%; box-sizing:border-box; margin-top:7px; border:1px solid var(--zup-border); border-radius:12px; padding:12px 14px; font:inherit; color:var(--zup-text); background:#fff; }
.zupbox-form textarea { resize:vertical; }
.zupbox-check { display:flex !important; gap:8px; align-items:center; font-weight:600 !important; }
.zupbox-check input { width:auto; margin:0; }
.zupbox-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 20px; }
.zupbox-form-section { border-top:1px solid var(--zup-border); padding-top:22px; margin-top:8px; }
.zupbox-form-actions { display:flex; gap:10px; margin-top:12px; }
.zupbox-alert { padding:13px 15px; border-radius:12px; margin-bottom:18px; font-weight:700; }
.zupbox-alert-error { background:#FEF2F2; color:#991B1B; border:1px solid #FECACA; }
.zupbox-alert-success { background:#ECFDF5; color:#065F46; border:1px solid #A7F3D0; }
.zupbox-auth-links { color:var(--zup-muted); margin:18px 0 0; }
.zupbox-profile-cover { min-height:290px; border-radius:26px 26px 0 0; position:relative; overflow:hidden; background:linear-gradient(135deg,#2563EB,#38BDF8 55%,#14B8A6); background-size:cover; background-position:center; }
.zupbox-profile-cover-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.45)); }
.zupbox-profile-head { position:absolute; left:34px; right:34px; bottom:28px; display:flex; gap:20px; align-items:end; color:#fff; }
.zupbox-profile-title h1 { margin:0 0 5px; font-size:42px; letter-spacing:-.04em; }
.zupbox-profile-title p { margin:0; opacity:.9; }
.zupbox-profile-title .zupbox-kicker { color:#fff; opacity:.8; }
.zupbox-avatar { width:58px; height:58px; border-radius:16px; object-fit:cover; background:#E2E8F0; display:block; }
.zupbox-avatar-lg { width:110px; height:110px; border-radius:22px; }
.zupbox-avatar-xl { width:150px; height:150px; border-radius:28px; border:5px solid rgba(255,255,255,.9); box-shadow:0 10px 25px rgba(0,0,0,.18); }
.zupbox-profile-actions { padding:16px 24px; background:#fff; border:1px solid var(--zup-border); border-top:0; display:flex; justify-content:flex-end; gap:10px; }
.zupbox-profile-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(280px,1fr); gap:20px; margin-top:20px; }
.zupbox-profile-grid main, .zupbox-profile-grid aside { display:grid; gap:20px; align-content:start; }
.zupbox-section-title { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.zupbox-section-title h2 { margin:0; }
.zupbox-details { margin:0; }
.zupbox-details > div { display:grid; grid-template-columns:110px 1fr; gap:12px; padding:10px 0; border-bottom:1px solid var(--zup-border); }
.zupbox-details > div:last-child { border-bottom:0; }
.zupbox-details dt { color:var(--zup-muted); font-weight:700; }
.zupbox-details dd { margin:0; font-weight:700; }
.zupbox-interest-groups { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.zupbox-interest-group { padding:16px; border-radius:14px; background:#F8FAFC; border:1px solid var(--zup-border); }
.zupbox-interest-group h3 { font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--zup-blue); margin-bottom:7px; }
.zupbox-interest-group p { margin:0; }
.zupbox-friend-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px; }
.zupbox-friend-tile { text-align:center; color:var(--zup-text) !important; }
.zupbox-friend-tile .zupbox-avatar { margin:0 auto 7px; }
.zupbox-friend-tile span { display:block; font-size:12px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zupbox-search { display:flex; gap:10px; margin-bottom:24px; }
.zupbox-search input { margin:0; flex:1; }
.zupbox-member-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.zupbox-member-card { text-align:center; }
.zupbox-member-card .zupbox-avatar { margin:0 auto 15px; }
.zupbox-member-card h2 { margin-bottom:5px; }
.zupbox-member-card .zupbox-button { margin-top:12px; }
.zupbox-avatar-edit { display:flex; align-items:center; gap:20px; }

@media (max-width: 850px) {
	.zupbox-grid-3, .zupbox-profile-grid, .zupbox-member-grid { grid-template-columns:1fr; }
	.zupbox-hero { align-items:flex-start; flex-direction:column; }
	.zupbox-friend-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width: 600px) {
	.zupbox-shell, .zupbox-profile { padding:20px 14px 48px; }
	.zupbox-card { padding:18px; }
	.zupbox-profile-head { left:18px; right:18px; bottom:18px; align-items:end; }
	.zupbox-avatar-xl { width:95px; height:95px; border-radius:20px; }
	.zupbox-profile-title h1 { font-size:28px; }
	.zupbox-form-grid, .zupbox-interest-groups { grid-template-columns:1fr; }
	.zupbox-friend-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
	.zupbox-page-heading { align-items:flex-start; }
}