:root {
    --pd-ink: #241b2f;
    --pd-muted: #746b7d;
    --pd-plum: #6f3b78;
    --pd-plum-dark: #4c2657;
    --pd-coral: #ee786f;
    --pd-gold: #e4ad52;
    --pd-success: #3f8c72;
    --pd-danger: #c54f61;
    --pd-surface: rgba(255, 255, 255, .9);
    --pd-border: rgba(76, 38, 87, .12);
    --pd-shadow-sm: 0 8px 24px rgba(53, 31, 62, .08);
    --pd-shadow: 0 20px 60px rgba(53, 31, 62, .14);
    --pd-radius-sm: 12px;
    --pd-radius: 20px;
    --pd-radius-lg: 30px;
    --pd-ease: cubic-bezier(.2, .8, .2, 1);
}

html { scroll-behavior: smooth; }

body {
    min-height: 100vh;
    color: var(--pd-ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.55;
    background:
        radial-gradient(circle at 8% 12%, rgba(238, 120, 111, .14), transparent 28rem),
        radial-gradient(circle at 92% 24%, rgba(111, 59, 120, .14), transparent 32rem),
        #fbf8f3;
    text-shadow: none;
}

header {
    position: sticky;
    top: 0;
    z-index: 1050;
    height: 88px;
    padding: 0 clamp(18px, 4vw, 60px);
    flex-direction: row;
    justify-content: space-between;
    background: rgba(251, 248, 243, .84);
    border-bottom: 1px solid var(--pd-border);
    box-shadow: 0 8px 30px rgba(53, 31, 62, .05);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.logo-container { margin: 0; }
.logo { width: auto; max-width: 108px; max-height: 68px; margin: 0; filter: drop-shadow(0 8px 12px rgba(76, 38, 87, .12)); }

#nav-wrapper { width: auto; background: transparent; }
.navbar-collapse { gap: 4px; align-items: center; }
.navbar-collapse .nav-link,
nav a {
    width: auto;
    margin: 0;
    padding: 10px 13px;
    color: var(--pd-ink) !important;
    background: transparent;
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 650;
    transition: color .2s var(--pd-ease), background .2s var(--pd-ease), transform .2s var(--pd-ease);
}
.navbar-collapse .nav-link:hover,
nav a:hover { color: var(--pd-plum-dark) !important; background: rgba(111, 59, 120, .1); transform: translateY(-1px); }
.navbar-collapse .nav-link:last-child { color: var(--pd-danger) !important; }

h1, h1.text-center {
    margin: 0 0 14px;
    color: var(--pd-ink);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: 1.05;
    text-shadow: none;
}
h2 { color: var(--pd-plum-dark); font-weight: 750; letter-spacing: -.025em; }
h5, .card-title { color: var(--pd-ink); font-weight: 750; }
p { color: var(--pd-muted); }

.container,
.container-fluid { width: min(1180px, calc(100% - 32px)); margin-inline: auto; padding: 36px 0 70px; }

.login-container,
.home-container {
    min-height: calc(100vh - 88px);
    height: auto;
    margin: 0;
    padding: clamp(28px, 6vw, 72px) 16px 80px;
    color: var(--pd-ink);
    text-shadow: none;
    background-image: linear-gradient(135deg, rgba(251,248,243,.9), rgba(255,255,255,.7)), url('/images/background.jpg');
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

.profile-details {
    width: min(1160px, 100%);
    max-height: none;
    margin: 0 auto;
    padding: clamp(26px, 4vw, 52px);
    overflow: visible;
    color: var(--pd-ink);
    background: rgba(255, 255, 255, .76);
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: var(--pd-radius-lg);
    box-shadow: var(--pd-shadow);
    backdrop-filter: blur(18px);
}

.login-form {
    max-width: 470px;
    padding: clamp(28px, 5vw, 46px);
    color: var(--pd-ink);
    background: var(--pd-surface);
    border: 1px solid rgba(255,255,255,.9);
    border-radius: var(--pd-radius-lg);
    box-shadow: var(--pd-shadow);
    backdrop-filter: blur(18px);
    animation: pd-rise .55s var(--pd-ease) both;
}
.login-form h1 { color: var(--pd-ink); }

.form-group { width: 100%; color: var(--pd-ink); }
.form-group label { display: block; margin-bottom: 7px; color: var(--pd-ink); font-size: .88rem; font-weight: 700; }
.form-control,
.form-control-file,
select.form-control,
textarea.form-control {
    min-height: 48px;
    padding: 11px 14px;
    color: var(--pd-ink);
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(76,38,87,.18);
    border-radius: var(--pd-radius-sm);
    box-shadow: 0 1px 0 rgba(255,255,255,.9) inset;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.form-control:focus {
    color: var(--pd-ink);
    background: #fff;
    border-color: var(--pd-plum);
    box-shadow: 0 0 0 4px rgba(111,59,120,.13);
    outline: 0;
}

.btn {
    width: auto;
    max-width: none;
    min-height: 44px;
    margin: 6px 4px;
    padding: 10px 18px;
    border: 0;
    border-radius: 999px;
    font-weight: 750;
    letter-spacing: .01em;
    box-shadow: 0 8px 20px rgba(76,38,87,.12);
    transition: transform .2s var(--pd-ease), box-shadow .2s var(--pd-ease), filter .2s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 13px 28px rgba(76,38,87,.18); filter: saturate(1.08); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-primary, .btn-success { color: #fff; background: linear-gradient(135deg, var(--pd-plum), var(--pd-plum-dark)); }
.btn-secondary { color: var(--pd-plum-dark); background: #f0e8f1; }
.btn-danger { color: #fff; background: linear-gradient(135deg, #d76675, var(--pd-danger)); }
.btn-link { color: var(--pd-plum); font-weight: 700; }
.btn-block { width: 100%; margin-inline: 0; }

.card,
.combination,
.achievement,
.friend-card {
    color: var(--pd-ink);
    background: var(--pd-surface);
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius);
    box-shadow: var(--pd-shadow-sm);
    transition: transform .25s var(--pd-ease), box-shadow .25s var(--pd-ease), border-color .25s;
}
.card:hover, .combination:hover, .achievement:hover, .friend-card:hover {
    transform: translateY(-4px);
    border-color: rgba(111,59,120,.26);
    box-shadow: var(--pd-shadow);
}
.card-body { padding: 22px; }
.progression-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr)); gap: 18px; }
.progression-list .figure { height: 100%; margin: 0 !important; animation: pd-rise .45s var(--pd-ease) both; }

#filters-container {
    padding: 18px;
    background: rgba(255,255,255,.62);
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius);
}
.filters, .category-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.filter-btn, .category-filter-btn { min-height: 38px; padding: 7px 13px; font-size: .86rem; box-shadow: none; }
.filter-btn.active, .category-filter-btn.active { color: #fff; background: var(--pd-plum); }

.search-container { max-width: 760px; }
#search-bar { min-height: 54px; padding-left: 18px; border: 1px solid var(--pd-border); border-radius: 999px; box-shadow: var(--pd-shadow-sm); }

.table-responsive {
    overflow: hidden auto;
    background: var(--pd-surface);
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius);
    box-shadow: var(--pd-shadow-sm);
}
.table { margin: 0; color: var(--pd-ink); }
.table thead th { padding: 14px 16px; color: var(--pd-plum-dark); background: #f4edf4; border: 0; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.table td { padding: 14px 16px; border-color: rgba(76,38,87,.08); vertical-align: middle; }
.table-striped > tbody > tr:nth-of-type(odd) > * { background: rgba(111,59,120,.025); }

.modal-content {
    color: var(--pd-ink);
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(255,255,255,.9);
    border-radius: var(--pd-radius);
    box-shadow: var(--pd-shadow);
    overflow: hidden;
}
.modal-header, .modal-footer { border-color: var(--pd-border); }
.modal.fade .modal-dialog { transform: translateY(20px) scale(.98); transition: transform .25s var(--pd-ease); }
.modal.show .modal-dialog { transform: none; }

.alert, .error-message, .success-message { padding: 14px 18px; border: 0; border-radius: var(--pd-radius-sm); }
.alert-info { color: var(--pd-plum-dark); background: #f0e7f1; }
.error-message { color: #752d3a; background: #fbe8eb; }
.success-message { color: #225c49; background: #e4f3ed; }

.index-container {
    min-height: calc(100vh - 88px);
    display: grid;
    place-items: center;
    padding: 40px 18px 100px;
    background: linear-gradient(125deg, rgba(251,248,243,.82), rgba(251,248,243,.48)), url('/images/background.jpg') center/cover fixed;
}
.index-container > div { max-width: 720px; padding: clamp(35px, 7vw, 74px); background: rgba(255,255,255,.78); border: 1px solid rgba(255,255,255,.9); border-radius: 36px; box-shadow: var(--pd-shadow); backdrop-filter: blur(18px); animation: pd-rise .65s var(--pd-ease) both; }
.index-container h1 { font-size: clamp(2.6rem, 8vw, 5rem); }
.index-container h2 { color: var(--pd-plum); }

footer {
    position: static;
    z-index: auto;
    padding: 24px 18px;
    color: rgba(255,255,255,.82);
    background: var(--pd-plum-dark);
    font-size: .88rem;
}

@keyframes pd-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes pd-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(238,120,111,.35); } 50% { box-shadow: 0 0 0 8px rgba(238,120,111,0); } }
.glow, .sparkle { animation: pd-pulse 1.8s ease-in-out infinite; }

@media (max-width: 767px) {
    header { height: 72px; padding: 0 18px; }
    .logo { max-width: 86px; max-height: 56px; }
    header .navbar-toggler { left: auto; right: 20px; width: 30px; height: 26px; }
    #nav-icon1 span { background: var(--pd-plum-dark); }
    #nav-wrapper { position: static; }
    .navbar-collapse {
        position: fixed;
        inset: 72px 12px auto;
        width: auto;
        max-height: calc(100vh - 90px);
        padding: 12px;
        overflow-y: auto;
        background: rgba(255,255,255,.96);
        border: 1px solid var(--pd-border);
        border-radius: var(--pd-radius);
        box-shadow: var(--pd-shadow);
        backdrop-filter: blur(18px);
    }
    .navbar-collapse.show { display: flex; flex-direction: column; align-items: stretch; background: rgba(255,255,255,.96); }
    .navbar-collapse .nav-link { padding: 12px 14px; text-align: left; }
    .login-container, .home-container { min-height: calc(100vh - 72px); padding: 20px 12px 50px; background-attachment: scroll; }
    .profile-details { padding: 24px 16px; border-radius: 22px; }
    .progression-list { grid-template-columns: 1fr; }
    .container, .container-fluid { width: min(100% - 24px, 1180px); padding-top: 24px; }
    .table-responsive { border-radius: 14px; }
    h1, h1.text-center { font-size: clamp(1.9rem, 10vw, 2.7rem); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Dashboard product layer */
.dashboard-hero { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr); gap:clamp(24px,5vw,64px); align-items:center; margin-bottom:34px; padding:clamp(24px,5vw,48px); color:#fff; background:radial-gradient(circle at 92% 12%,rgba(238,120,111,.65),transparent 36%),linear-gradient(135deg,var(--pd-plum-dark),var(--pd-plum)); border-radius:26px; box-shadow:0 24px 60px rgba(76,38,87,.24); overflow:hidden; animation:pd-rise .55s var(--pd-ease) both; }
.dashboard-hero h1,.dashboard-hero p { color:#fff; }
.dashboard-hero h1 { margin:8px 0 12px; font-size:clamp(2.1rem,5vw,3.8rem); }
.dashboard-hero p { margin-bottom:20px; color:rgba(255,255,255,.78); }
.dashboard-eyebrow { color:#f7d39a; font-size:.78rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.dashboard-actions { display:flex; flex-wrap:wrap; gap:8px; }
.dashboard-actions .btn-primary { color:var(--pd-plum-dark); background:#fff; }
.dashboard-actions .btn-secondary { color:#fff; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.2); }
.dashboard-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.dashboard-stat { display:flex; min-width:0; padding:16px 8px; flex-direction:column; align-items:center; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.13); border-radius:16px; backdrop-filter:blur(8px); }
.dashboard-stat strong { color:#fff; font-size:clamp(1.4rem,3vw,2rem); line-height:1; }
.dashboard-stat span { margin-top:7px; color:rgba(255,255,255,.72); font-size:.72rem; }
.dashboard-stat-accent strong { color:#ffd4a5; }
.dashboard-progress { grid-column:1/-1; height:8px; margin-top:5px; overflow:hidden; background:rgba(255,255,255,.13); border-radius:99px; }
.dashboard-progress span { display:block; height:100%; background:linear-gradient(90deg,var(--pd-coral),#ffd29c); border-radius:inherit; transition:width .8s var(--pd-ease); }
body:has(.dashboard-hero) #toggle-filters { color:var(--pd-plum-dark); background:#f0e8f1; box-shadow:none; }
@media (max-width:767px) { .dashboard-hero { grid-template-columns:1fr; padding:26px 20px; } .dashboard-stat { padding:13px 4px; } .dashboard-stat span { font-size:.64rem; } }