:root {
    --bg: #16171a;
    --card: #23252b;
    --link: #2f323a;
    --text: #f2f3f5;
    --muted: #a5a8b0;
    --btn: #2f323a;
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px)
}

:root[data-theme="light"] {
    --bg: #a7a8ad;
    --card: #ebedf1;
    --link: #fff;
    --text: #111;
    --muted: #555;
    --btn: #fff
}

* {
    box-sizing: border-box
}

html {
    scroll-padding-top: env(safe-area-inset-top, 0px)
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    padding: 36px 16px 0
}

.card {
    width: 100%;
    max-width: 580px;
    background: var(--card);
    border-radius: 36px 36px 0 0;
    padding: 28px 28px 60px;
    position: relative
}

.top {
    display: flex;
    justify-content: space-between
}

.ic {
    transition: transform .3s;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--btn);
    border: 0;
    display: grid;
    place-items: center;
    color: var(--text);
    cursor: pointer
}

.ic svg {
    width: 20px;
    height: 20px
}

.profile {
    text-align: center;
    margin-top: 8px
}

.avatar {
    position: relative;
    overflow: hidden;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    margin: 0 auto 16px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #ff2d2d, #7a0a0a);
    color: #fff;
    font-weight: 800;
    font-size: 38px;
    letter-spacing: -1px
}

h1 {
    font-size: 24px;
    margin: 0 0 8px;
    font-weight: 700
}

.bio {
    margin: 0 auto;
    max-width: 300px;
    font-size: 16px;
    line-height: 1.4
}

.socials {
    display: flex;
    justify-content: center;
    gap: 22px;
    margin: 22px 0 32px
}

.socials a {
    color: var(--text)
}

.socials svg {
    width: 28px;
    height: 28px;
    display: block
}

.links {
    display: grid;
    gap: 14px
}

.link {
    display: flex;
    align-items: center;
    background: var(--link);
    border-radius: 10px;
    height: 64px;
    padding: 0 16px 0 8px;
    color: var(--text);
    text-decoration: none;
    font-weight: 500;
    transition: transform .15s
}

.link:hover {
    transform: scale(1.015)
}

.link:focus-visible,
.ic:focus-visible,
.socials a:focus-visible {
    outline: 3px solid #6366f1;
    outline-offset: 2px
}

.thumb {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: none
}

.thumb svg {
    width: 26px;
    height: 26px
}

.link span {
    flex: 1;
    text-align: center;
    padding: 0 8px
}

.dots {
    width: 16px;
    color: var(--muted);
    flex: none
}

.toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: #111;
    color: #fff;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 14px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s
}

.toast.show {
    opacity: 1
}

.avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.avatar.editable {
    cursor: pointer
}

.avatar.editable:focus-visible {
    outline: 3px solid #6366f1;
    outline-offset: 3px
}