/* Публичная карточка профиля crushgram.app/{username}.
   Цвета — из Theme.swift приложения: чёрный фон, акцент #FF4D5E. */

:root {
    --accent: #FF4D5E;
    --accent-end: #8B5CF6;
    --surface: rgba(255, 255, 255, 0.08);
    --hairline: rgba(255, 255, 255, 0.10);
    --text-secondary: rgba(255, 255, 255, 0.55);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: #000;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.wrap {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    padding: 40px 20px calc(40px + env(safe-area-inset-bottom));
}

.card {
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 24px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 22px;
}

.avatar {
    width: 112px;
    height: 112px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--surface);
}

.avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 44px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-end));
}

.name {
    margin: 18px 0 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    word-break: break-word;
}

.username {
    margin: 6px 0 0;
    font-size: 15px;
    color: var(--text-secondary);
    word-break: break-all;
}

.about {
    margin: 14px 0 0;
    font-size: 15px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.85);
    white-space: pre-wrap;
    word-break: break-word;
}

.btn {
    margin-top: 26px;
    width: 100%;
    padding: 15px 20px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent), var(--accent-end));
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
}

.store {
    font-size: 14px;
    color: var(--text-secondary);
    text-decoration: none;
    border-bottom: 1px solid var(--hairline);
    padding-bottom: 2px;
}

/* Футер заглушки корня (index.html) */
.links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 22px;
}

.links a {
    font-size: 14px;
    color: var(--text-secondary);
    text-decoration: none;
    border-bottom: 1px solid var(--hairline);
    padding-bottom: 2px;
}

@media (prefers-reduced-motion: no-preference) {
    .btn { transition: transform 0.15s ease; }
    .btn:active { transform: scale(0.98); }
}