* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'JetBrains Mono', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
}

:root {
    /* Standard "ease-out"-leaning curve (Material-style) used everywhere
       instead of the browser default "ease" — it accelerates fast then
       settles gently, which reads as noticeably smoother than default
       easing for hovers, toggles, and view switches. */
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

body {
    background: linear-gradient(145deg, #0b0e14 0%, #141a24 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 40px 20px;
}

/* ----- Lucide icons (https://lucide.dev) ----- */
/* Makes every generated <svg> behave like an inline glyph: sized off the
   surrounding font-size, same as the old icon-font icons did. */
svg.lucide {
    width: 1em;
    height: 1em;
    stroke-width: 2;
    vertical-align: -0.125em;
    flex-shrink: 0;
    color: inherit;
}

.profile-card {
    max-width: 480px;
    width: 100%;
    background: rgba(22, 28, 38, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 48px 48px 32px 32px;
    padding: 2rem 1.8rem 2.2rem;
    box-shadow: 0 25px 50px -10px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.03);
    position: relative;
    animation: cardIn 0.5s ease;
    overflow: hidden;
}

@keyframes cardIn {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .profile-card { animation: none; }
}

/* ----- Tab navigation ----- */
.page-nav {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    background: rgba(0, 0, 0, 0.2);
    padding: 0.35rem;
    border-radius: 40px;
    margin-bottom: 1.8rem;
}

.page-nav button {
    flex: 1;
    text-decoration: none;
    color: #8ba0bd;
    background: transparent;
    border: none;
    padding: 0.55rem 1rem;
    border-radius: 32px;
    font-size: 0.9rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: color 0.2s var(--ease-smooth), background 0.25s var(--ease-smooth), box-shadow 0.25s var(--ease-smooth);
}

.page-nav button:hover { color: #d3e0f2; }

.page-nav button.active {
    background: #3d5977;
    color: #f0f6fe;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* ----- Views ----- */
/* contain: isolates each view's layout/paint work so switching tabs
   doesn't force the browser to re-check the whole page (memory/perf). */
.view { display: none; animation: viewIn 0.35s var(--ease-smooth); contain: layout style; }
.view.active { display: block; }

@keyframes viewIn {
    from { opacity: 0; transform: translateY(8px) scale(0.99); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .view { animation: none; }
}

.avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 1.8rem;
}

.avatar {
    width: 114px;
    height: 114px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2b3b4f, #1d2633);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.8rem;
    color: #e6edf5;
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(255, 255, 255, 0.03);
    margin-bottom: 0.9rem;
    transition: 0.2s;
    border: 2px solid #3a4a5e;
}

.display-name {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: #f0f6fe;
    margin-bottom: 0.15rem;
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.username-tag {
    font-size: 1rem;
    color: #8a9bb5;
    background: rgba(255, 255, 255, 0.04);
    padding: 0.2rem 1rem;
    border-radius: 40px;
    display: inline-block;
    border: 1px solid rgba(255, 255, 255, 0.02);
    margin-top: 0.1rem;
    font-weight: 400;
    letter-spacing: 0.3px;
}

.bio {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 28px;
    padding: 1rem 1.5rem;
    margin: 0.8rem 0 1.6rem 0;
    border-left: 3px solid #5b7a9a;
    border-right: 1px solid rgba(255, 255, 255, 0.02);
    text-align: center;
}

.bio p {
    color: #c9d6e8;
    font-size: 0.92rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.2px;
}

.bio i, .bio svg { color: #7b98b9; margin: 0 4px; }

.account-meta {
    display: flex;
    justify-content: center;
    gap: 1.8rem;
    background: rgba(0, 0, 0, 0.15);
    padding: 0.7rem 0.8rem;
    border-radius: 60px;
    margin-bottom: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.02);
    flex-wrap: wrap;
}

.meta-item { display: flex; align-items: center; gap: 0.5rem; color: #a2b6d0; font-size: 0.85rem; }
.meta-item i { color: #6d8bb0; font-size: 1rem; }
.meta-item span { font-weight: 500; color: #d3e0f2; }

/* ----- Section label ----- */
.section-label {
    color: #6d84a3;
    font-size: 0.8rem;
    font-weight: 500;
    margin: 0 0.3rem 0.7rem;
    letter-spacing: 0.2px;
}

/* ----- Links ----- */
.links-list { display: flex; flex-direction: column; gap: 0.9rem; margin-bottom: 0.4rem; }

.link-item {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 60px;
    padding: 0.85rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    color: #ecf3fc;
    font-weight: 500;
    font-size: 1.05rem;
    transition: background 0.2s var(--ease-smooth), border-color 0.2s var(--ease-smooth), box-shadow 0.2s var(--ease-smooth), transform 0.2s var(--ease-smooth);
    border: 1px solid rgba(255, 255, 255, 0.02);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    position: relative;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
}

.link-item .platform-icon { width: 28px; font-size: 1.4rem; color: #8db1d4; text-align: center; transition: 0.2s; }
.link-text-wrap { flex: 1; display: flex; flex-direction: column; gap: 0.1rem; }
.link-item .link-text { letter-spacing: 0.2px; }
.link-item .link-desc { font-size: 0.78rem; font-weight: 400; color: #7f93b0; letter-spacing: 0.1px; }
.link-item .arrow-icon { color: #5f7b9b; font-size: 0.9rem; opacity: 0.6; transition: 0.2s; }

.link-item:hover { background: rgba(70, 100, 140, 0.15); border-color: rgba(255, 255, 255, 0.08); transform: scale(1.01); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4); }
.link-item:hover .platform-icon { color: #b8d4f5; }
.link-item:hover .arrow-icon { opacity: 1; color: #b0cbe9; transform: translateX(4px); }

.link-item.instagram .platform-icon { color: #d67b9b; }
.link-item.twitter .platform-icon { color: #6b9cd6; }
.link-item.github .platform-icon { color: #c9d1d9; }
.link-item.youtube .platform-icon { color: #d96b6b; }
.link-item.twitch .platform-icon { color: #a970d6; }
.link-item.tiktok .platform-icon { color: #d6a0c0; }
.link-item.website .platform-icon { color: #7fbf9f; }
.link-item.namemc .platform-icon { color: #6ec24a; }
.link-item.discord-toggle .platform-icon { color: #7b8fd6; }

.link-item.discord-toggle.active .arrow-icon { transform: rotate(90deg); opacity: 1; color: #b0cbe9; }

/* ----- Discord embed (collapsible) ----- */
/* Uses the grid-template-rows 0fr -> 1fr technique instead of animating
   max-height. Animating max-height toward an arbitrary ceiling (420px) makes
   the transition's easing play out against that fake number instead of the
   embed's real height, which is exactly what reads as "laggy" or delayed.
   Grid rows animate against the actual content height, so it's smooth
   regardless of the embed's real size. */
.discord-collapse {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s var(--ease-smooth);
}

.discord-collapse.open {
    grid-template-rows: 1fr;
}

.discord-embed {
    display: flex;
    justify-content: center;
    overflow: hidden;
    min-height: 0;
    padding: 0.7rem 0 0.9rem 0;
}

.discord-embed a {
    display: block;
    border-radius: 20px;
    overflow: hidden;
    line-height: 0;
    transition: transform 0.2s var(--ease-smooth);
}

.discord-embed a:hover { transform: scale(1.01); }

.discord-embed img {
    display: block;
    width: 100%;
    max-width: 340px;
    height: auto;
}

/* ----- Projects ----- */
.projects-grid { display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: 0.4rem; }

.project-card {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.02);
    overflow: hidden;
    transition: border-color 0.2s var(--ease-smooth), box-shadow 0.2s var(--ease-smooth);
    /* isolates each card's rendering so the browser doesn't have to
       re-layout/re-paint the whole grid when one card changes (memory/perf) */
    contain: content;
}

.project-card:hover { border-color: rgba(255,255,255,0.08); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35); }

.project-banner {
    position: relative;
    width: 100%;
    height: 110px;
    background-size: cover;
    background-position: center;
    background-color: rgba(0, 0, 0, 0.25);
}

.project-avatar {
    position: absolute;
    left: 18px;
    bottom: -26px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 3px solid #1b222e;
    object-fit: cover;
    background: #1b222e;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
}

.project-body { padding: 2.1rem 1.2rem 1.1rem; }

.project-name {
    color: #ecf3fc;
    font-weight: 600;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.project-desc {
    color: #9fb2cc;
    font-size: 0.85rem;
    margin-top: 0.4rem;
    line-height: 1.5;
}

/* ----- Project tags ----- */
.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.7rem;
}

.project-tag {
    background: rgba(93, 130, 172, 0.14);
    color: #9dc2e8;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    padding: 0.25rem 0.7rem;
    border-radius: 30px;
    border: 1px solid rgba(157, 194, 232, 0.16);
    line-height: 1.3;
    transition: 0.2s;
}

.project-card:hover .project-tag { border-color: rgba(157, 194, 232, 0.3); }

.project-invite-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.9rem;
    background: #3d5977;
    color: #f0f6fe;
    padding: 0.5rem 1.1rem;
    border-radius: 40px;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s var(--ease-smooth), transform 0.2s var(--ease-smooth);
}

.project-invite-btn:hover { background: #4a6b8c; transform: scale(1.02); }

.projects-status {
    color: #6d84a3;
    font-size: 0.85rem;
    text-align: center;
    padding: 1rem;
}

.footer-join {
    margin-top: 1.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    color: #4f6988;
    font-size: 0.8rem;
    border-top: 1px solid rgba(255, 255, 255, 0.02);
    padding-top: 1rem;
    letter-spacing: 0.2px;
}

.footer-join i, .footer-join svg { font-size: 0.75rem; color: #4f6b8d; }
.footer-join strong { color: #7b98bb; font-weight: 500; }

.credit-note { margin-top: 1.2rem; text-align: center; color: #31435a; font-size: 0.7rem; letter-spacing: 0.3px; }
.credit-note a { color: #4b6b8f; text-decoration: none; border-bottom: 1px dotted #3a506b; }

.toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #1d2633;
    color: #ecf3fc;
    padding: 0.7rem 1.4rem;
    border-radius: 40px;
    font-size: 0.85rem;
    border: 1px solid rgba(255,255,255,0.06);
    opacity: 0;
    transition: opacity 0.25s var(--ease-smooth), transform 0.25s var(--ease-smooth);
    pointer-events: none;
    z-index: 10;
}

.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 480px) {
    .profile-card { padding: 1.6rem 1.2rem; border-radius: 40px 40px 28px 28px; }
    .avatar { width: 92px; height: 92px; font-size: 3rem; }
    .display-name { font-size: 1.7rem; }
    .bio p { font-size: 0.88rem; }
    .link-item { padding: 0.75rem 1.2rem; font-size: 0.95rem; }
    .account-meta { gap: 0.8rem; padding: 0.5rem 0.8rem; font-size: 0.75rem; }
}

@media (max-width: 380px) {
    .profile-card { padding: 1.2rem 0.9rem; }
    .meta-item { font-size: 0.7rem; }
    .link-item .platform-icon { font-size: 1.1rem; width: 22px; }
}

/* ----- Error pages (404 / 500 / 403) ----- */
.error-card {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 2.6rem;
    padding-bottom: 2.6rem;
}

.error-icon {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.4rem;
    background: rgba(255, 255, 255, 0.04);
    border: 2px solid rgba(255, 255, 255, 0.05);
    color: #7b9fd6;
}

.error-icon svg.lucide, .error-icon i { width: 40px; height: 40px; }

.error-code {
    font-size: 3.4rem;
    font-weight: 800;
    letter-spacing: -1px;
    color: #f0f6fe;
    line-height: 1;
    margin-bottom: 0.4rem;
}

.error-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: #dce6f5;
    margin-bottom: 0.6rem;
}

.error-desc {
    color: #8ba0bd;
    font-size: 0.95rem;
    line-height: 1.55;
    max-width: 320px;
    margin-bottom: 1.8rem;
}

.error-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* accent colors per error type */
.error-card.e404 .error-icon { color: #7b9fd6; background: rgba(123, 159, 214, 0.1); border-color: rgba(123, 159, 214, 0.25); }
.error-card.e403 .error-icon { color: #d6a970; background: rgba(214, 169, 112, 0.1); border-color: rgba(214, 169, 112, 0.25); }
.error-card.e500 .error-icon { color: #d67b7b; background: rgba(214, 123, 123, 0.1); border-color: rgba(214, 123, 123, 0.25); }

/* ----- Legal pages (Privacy Policy / Terms of Service) ----- */
/* Shared template used across all my sites — reused as-is, only the
   placeholder tokens ([PROJECT NAME], [CONTACT EMAIL], [YEAR]) change
   per project. No nav link points here on purpose; link to these pages
   directly (e.g. from a Discord bot's "Terms" field) where needed. */
.legal-card {
    max-width: 640px;
    padding: 2.4rem 2rem 2.6rem;
}

.legal-header {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 0.3rem;
    padding-bottom: 1.4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.legal-header .legal-icon {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(123, 159, 214, 0.1);
    border: 2px solid rgba(123, 159, 214, 0.25);
    color: #7b9fd6;
}

.legal-header .legal-icon svg.lucide, .legal-header .legal-icon i { width: 22px; height: 22px; }

.legal-heading h1 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #f0f6fe;
    letter-spacing: -0.3px;
    line-height: 1.25;
}

.legal-updated {
    color: #6d84a3;
    font-size: 0.82rem;
    margin-top: 0.2rem;
}

.legal-body {
    margin-top: 1.6rem;
    color: #c9d6e8;
    font-size: 0.92rem;
    line-height: 1.7;
}

.legal-body p { margin-bottom: 1rem; }

.legal-body h2 {
    color: #dce6f5;
    font-size: 1.02rem;
    font-weight: 600;
    margin: 1.8rem 0 0.7rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.legal-body h2 svg.lucide, .legal-body h2 i { color: #7b98b9; }

.legal-body ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-bottom: 1rem;
}

.legal-body ul li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    color: #b6c5dc;
}

.legal-body ul li svg.lucide, .legal-body ul li i {
    color: #5b7a9a;
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.legal-body a {
    color: #8db1d4;
    text-decoration: none;
    border-bottom: 1px dotted #4a6b8c;
}

.legal-body a:hover { color: #b0cbe9; }

.legal-placeholder {
    color: #d6a970;
    background: rgba(214, 169, 112, 0.1);
    padding: 0.05rem 0.4rem;
    border-radius: 6px;
    font-size: 0.88em;
}

.legal-footer {
    margin-top: 2rem;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.02);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.legal-copyright {
    color: #4f6988;
    font-size: 0.78rem;
}

.legal-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #7b98b9;
    font-size: 0.82rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s var(--ease-smooth);
}

.legal-back-link:hover { color: #b0cbe9; }

@media (max-width: 480px) {
    .legal-card { padding: 1.8rem 1.3rem 2rem; }
    .legal-header { gap: 0.7rem; }
    .legal-heading h1 { font-size: 1.2rem; }
}