:root { --bg: #A8DBA8; --panel: #0B486B; --panel-hover: #3B8686; --red: #3B8686; --text: #fff; --muted: #CFF09E; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: "Segoe UI", system-ui, sans-serif; min-height: 100vh; }
.card-page { max-width: 480px; margin: 0 auto; padding: 0 0 2.5rem; }

.profile { position: relative; background: var(--panel); border-radius: 0 0 20px 20px; overflow: hidden; margin-bottom: 1rem; }
.cover { height: 130px; background-size: cover; background-position: center; }
.avatar { position: absolute; top: 70px; left: 20px; width: 110px; height: 110px; border-radius: 50%; object-fit: cover; border: 3px solid var(--red); background: var(--panel); }
.profile-info { padding: 70px 20px 20px; }
h1 { margin: 0; font-size: 1.5rem; }
.title { margin: 0.2rem 0 0; color: #c8d5e3; font-size: 1.05rem; }
.location { margin: 0.5rem 0 0; color: var(--muted); font-size: 0.9rem; font-weight: 600; border-left: 3px solid var(--red); padding-left: 0.5rem; }
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 0; padding: 0; }
.tags li { background: #3B8686; padding: 0.3rem 0.9rem; border-radius: 999px; font-size: 0.8rem; }

.actions { display: flex; gap: 0.6rem; padding: 0 1rem; margin-bottom: 1rem; }
.btn-main, .btn-icon { background: var(--red); color: #fff; border: 0; border-radius: 10px; font: inherit; font-weight: 700; cursor: pointer; box-shadow: 0 3px 0 #0B486B; }
.btn-main { flex: 1; padding: 0.9rem; font-size: 1rem; }
.btn-icon { width: 56px; font-size: 1.4rem; }
.btn-main:hover, .btn-icon:hover { filter: brightness(1.1); }

.links { display: grid; gap: 0.6rem; padding: 0 1rem; }
.link { display: flex; align-items: center; gap: 0.9rem; padding: 0.7rem 1rem 0.7rem 0.7rem; background: var(--panel); border-radius: 12px; color: #fff; text-decoration: none; transition: background .15s, transform .15s; }
.link:hover, .link:focus-visible { background: var(--panel-hover); transform: translateX(2px); outline: none; }
.icon { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; }
.icon svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.link-text { flex: 1; min-width: 0; }
.link-text strong { display: block; font-size: 1.05rem; }
.link-text span { display: block; color: var(--muted); font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arrow { color: #fff; font-size: 1.2rem; }

.foot { text-align: center; margin-top: 1.5rem; font-size: 0.9rem; }
.foot a { color: var(--muted); }
.foot a:hover { color: #fff; }

.back-arrow { position: absolute; top: 12px; left: 12px; z-index: 2; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; text-decoration: none; font-size: 1.4rem; line-height: 1; backdrop-filter: blur(4px); }
.back-arrow:hover { background: rgba(0,0,0,.8); }

.back-arrow { width: auto; height: auto; padding: .7rem 1.2rem .7rem 1rem; border-radius: 999px; display: inline-flex; align-items: center; gap: .5rem; font-size: 1.05rem; font-weight: 600; top: 14px; left: 14px; }
.back-arrow .arrow { font-size: 1.7rem; line-height: 1; }