/* Component migration layer: removes the remaining legacy green UI. */

body > header { width:100%; max-width:none; height:82px; padding:0 clamp(18px,3vw,46px); flex-direction:row; justify-content:space-between; gap:24px; }
body > header .logo-container { display:flex; flex:0 0 auto; margin:0; align-items:center; }
body > header .logo { width:66px; max-width:66px; max-height:66px; margin:0; object-fit:contain; }
.brand-mark { position:relative; display:grid; width:68px; height:68px; place-items:center; border-radius:50%; isolation:isolate; text-decoration:none; transform-origin:center; animation:pd-brand-float 4.8s ease-in-out infinite; }
.brand-mark picture { position:relative; z-index:2; display:grid; place-items:center; width:100%; height:100%; }
.brand-logo { position:relative; z-index:2; display:block; border-radius:50%; filter:drop-shadow(0 8px 12px rgba(84,35,95,.2)); transition:transform .35s cubic-bezier(.2,.8,.2,1), filter .35s ease; }
.brand-orbit { position:absolute; inset:-2px; z-index:1; border-radius:50%; background:conic-gradient(from 20deg, transparent 0 18%, rgba(243,196,107,.95) 25%, rgba(216,101,120,.72) 39%, transparent 48% 78%, rgba(243,196,107,.7) 88%, transparent 96%); opacity:.8; animation:pd-brand-orbit 7s linear infinite; -webkit-mask:radial-gradient(circle, transparent 61%, #000 63% 69%, transparent 71%); mask:radial-gradient(circle, transparent 61%, #000 63% 69%, transparent 71%); }
.brand-mark::after { content:""; position:absolute; inset:9px; z-index:0; border-radius:50%; background:rgba(216,101,120,.18); filter:blur(9px); animation:pd-brand-glow 3.2s ease-in-out infinite; }
.brand-mark:hover .brand-logo, .brand-mark:focus-visible .brand-logo { transform:scale(1.07) rotate(-2deg); filter:drop-shadow(0 11px 16px rgba(84,35,95,.3)); }
.brand-mark:focus-visible { outline:3px solid rgba(243,196,107,.9); outline-offset:5px; }
@keyframes pd-brand-orbit { to { transform:rotate(360deg); } }
@keyframes pd-brand-float { 0%,100% { transform:translateY(0) rotate(0); } 50% { transform:translateY(-3px) rotate(1deg); } }
@keyframes pd-brand-glow { 0%,100% { opacity:.35; transform:scale(.88); } 50% { opacity:.8; transform:scale(1.1); } }
body > header #nav-wrapper { display:flex; width:auto; flex:1 1 auto; justify-content:flex-end; background:transparent; }
body > header .navbar-collapse { position:static; inset:auto; display:flex; width:auto; max-width:none; padding:5px; flex-direction:row; align-items:center; justify-content:flex-end; gap:2px; background:rgba(111,59,120,.055); border:1px solid rgba(111,59,120,.08); border-radius:999px; }
body > header .navbar-collapse .nav-link { width:auto; margin:0; padding:9px 11px; color:var(--pd-ink)!important; background:transparent!important; border-radius:999px; text-align:center; font-size:clamp(.72rem,.78vw,.88rem); white-space:nowrap; }
body > header .navbar-collapse .nav-link:hover { color:var(--pd-plum-dark)!important; background:#fff!important; box-shadow:0 7px 18px rgba(53,31,62,.09); }
body > header .navbar-collapse .nav-link:last-child { color:var(--pd-danger)!important; }
body > header .navbar-toggler { display:none; }

/* The old stylesheet capped all main panels at 600px. */
.login-container > .profile-details { width:min(1160px,100%); max-width:1160px; align-items:stretch; }
body:has(#profileForm) .profile-details { max-width:720px; }
body:has(#combinationForm) .profile-details { max-width:960px; }

/* Dashboard hero: deliberately centered and horizontal. */
.dashboard-hero { display:flex; width:100%; padding:clamp(30px,5vw,58px); flex-direction:column; align-items:center; gap:0; text-align:center; }
.dashboard-hero > div:first-child { display:flex; flex-direction:column; align-items:center; }
.dashboard-hero h1 { max-width:800px; margin:10px auto 14px; }
.dashboard-hero p { max-width:560px; margin:0 auto 22px; }
.dashboard-eyebrow { display:block; white-space:normal; text-align:center; }
.dashboard-actions { justify-content:center; }
.dashboard-stats { width:min(100%,560px); margin:28px auto 0; }

.card-title,.combination h3,.achievement h3 { color:var(--pd-ink); text-shadow:none; }
.card-text,.combination p,.achievement p { color:var(--pd-muted); text-shadow:none; }

/* Sequences */
#combinationForm { width:min(100%,540px); margin:0 auto 40px; padding:26px; background:rgba(111,59,120,.045); border:1px solid var(--pd-border); border-radius:var(--pd-radius); }
#combinationForm .add-item { width:54px; height:54px; margin:6px 0 12px; color:var(--pd-plum); background:#fff; border:1px solid var(--pd-border); border-radius:16px; box-shadow:var(--pd-shadow-sm); }
.sequences-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:16px; width:100%; }
.combination { display:flex; min-height:190px; margin:0; padding:22px; flex-direction:column; align-items:flex-start; }
.combination h3 { margin-bottom:8px; font-size:1.25rem; }
.combination p { flex:1; font-size:.98rem; }
.combination .btn-container { width:100%; margin-top:14px; justify-content:flex-start; gap:8px; }
.combination .btn.edit-combination { color:#fff; background:linear-gradient(135deg,var(--pd-plum),var(--pd-plum-dark)); }
.combination .btn.delete-combination { color:#fff; background:linear-gradient(135deg,#d76675,var(--pd-danger)); }
.combination .btn:hover { color:#fff; background:var(--pd-plum-dark); }
.combination .btn.delete-combination:hover { background:#a63b4c; }

/* Friends and profile */
.friend-request,.friend,.friend-search-result { display:flex; width:100%; margin:8px 0; padding:16px; align-items:center; gap:12px; background:rgba(255,255,255,.86); border:1px solid var(--pd-border); border-radius:16px; box-shadow:var(--pd-shadow-sm); }
.friend-request p,.friend p { flex:1; margin:0; color:var(--pd-ink); }
.friend img,.friend-request img { width:50px; height:50px; object-fit:cover; border:3px solid #fff; box-shadow:0 5px 16px rgba(53,31,62,.14); }
.friend a { color:var(--pd-plum); font-weight:750; text-decoration:none; }
#toggle-search-form { width:48px; height:48px; padding:0; font-size:1.5rem; }
#profileForm { width:100%; }

/* Achievements */
.achievements-container { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; width:100%; }
.achievement { width:auto; min-height:240px; padding:24px 18px; border:1px solid var(--pd-border); border-radius:var(--pd-radius); background:var(--pd-surface); }
.achievement img { max-width:112px; filter:drop-shadow(0 12px 16px rgba(53,31,62,.15)); }
.achievement h3 { font-size:1rem; }

/* Remaining legacy controls */
.filter-btn.active,.category-filter-btn.active { color:#fff!important; background:var(--pd-plum)!important; border:0!important; }
.filter-btn:hover,.category-filter-btn:hover,.filter-btn.active:hover,.category-filter-btn.active:hover { color:#fff!important; background:var(--pd-plum-dark)!important; }
.btn-container .edit-btn,.btn-container .remove-btn { border-radius:50%; background:#f1e9f2; }
.btn-container .edit-btn i { color:var(--pd-plum); }
.btn-container .remove-btn i { color:var(--pd-danger); }
.modal-title { color:var(--pd-ink); }
.success-message h2 { color:var(--pd-success); }
.success-message p { color:var(--pd-muted); }
.success-message .btn { background:var(--pd-plum); }

@media (max-width:1180px) {
    body > header { height:72px; }
    body > header .logo { width:58px; max-width:58px; max-height:58px; }
    body > header .brand-mark { width:60px; height:60px; }
    body > header .navbar-toggler { display:block; top:23px; right:22px; left:auto; }
    body > header #nav-icon1 span { background:var(--pd-plum-dark); }
    body > header .navbar-collapse { position:fixed; inset:78px 14px auto; display:none; width:auto; max-width:none; max-height:calc(100vh - 94px); padding:12px; overflow-y:auto; flex-direction:column; align-items:stretch; background:rgba(255,255,255,.97); border:1px solid var(--pd-border); border-radius:20px; box-shadow:var(--pd-shadow); backdrop-filter:blur(18px); }
    body > header .navbar-collapse.show { display:flex; background:rgba(255,255,255,.97); }
    body > header .navbar-collapse .nav-link { padding:12px 14px; text-align:left; font-size:.92rem; }
}

@media (max-width:600px) {
    .dashboard-hero { padding:30px 18px; }
    .dashboard-stats { grid-template-columns:repeat(3,1fr); }
    #combinationForm { padding:18px; }
    .sequences-list { grid-template-columns:1fr; }
    .friend-request,.friend { flex-wrap:wrap; }
}

@media (prefers-reduced-motion: reduce) {
    .brand-mark, .brand-orbit, .brand-mark::after { animation:none; }
    .brand-mark { transform:none; }
}