.wf-divider {
    width: 3em;
    height: 2px;
    background: var(--live-primary); 
    margin: 0 auto 1.5em; 
}

#identity-preview .wf-name, .wf-name {
    font-size: calc(var(--live-font-size) * 2.2);
    font-weight: 800;
    color: var(--live-text);
    margin-bottom: 0.2em;
    line-height: 1.2;
}

#identity-preview .wf-profession, .wf-profession {
    font-size: calc(var(--live-font-size) * 1.05);
    font-weight: 600;
    color: var(--live-primary);
    margin-bottom: 0.8em;
    opacity: 0.9;
}

#identity-preview .wf-bio, .wf-bio {
    opacity: 0.8;
    font-size: var(--live-font-size);
    line-height: 1.5;
    font-family: var(--live-font);
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
}
.wf-actions { 
    margin-top: 2.5em; 
    display: flex; 
    gap: 1.2rem; 
    justify-content: flex-end; 
}

/* Unified Section Architecture (THE LAW) */
#identity-preview,
#skills-preview,
[id^="portfolio-preview"],
#modules-preview,
#branding-preview {
    width: 100%;
    max-width: var(--cb-max-width);
    margin: 1rem auto var(--p-section-gap) auto;
    padding: 0 var(--p-floating-margin); /* THE SSOT FLOATING MARGIN */
    box-sizing: border-box;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

#footer-preview {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: var(--footer-padding, 1.5em);
    border-radius: 0;
    border: none;
    box-shadow: none;
    background: var(--footer-bg, #ffffff);
    backdrop-filter: none;
    display: flex;
    flex-direction: column;
    gap: 1.5em; /* SSOT: Consistent vertical spacing for footer elements */
}

#footer-preview > div {
    margin-bottom: 1em; /* Extra safety for legacy stacked elements */
    box-shadow: 0 4px 15px rgba(0,0,0,42%); /* Slight premium shadow */
    background: rgba(255,255,255,0.4); /* Subtle glass hint inside the footer block */
    padding: 1.2rem;
    border-radius: var(--card-radius);
}

#footer-preview > div:last-child {
    margin-bottom: 0;
}

/* Typography DNA (Strong Selectors) */
#master-preview h1, #master-preview h2, #master-preview h3, #master-preview p,
.canvas-body h1, .canvas-body h2, .canvas-body h3, .canvas-body p {
    font-family: var(--live-font);
    color: var(--live-text);
    margin: 0;
    line-height: 1.4;
}

.canvas-body h1 { font-size: calc(var(--live-font-size) * 2.5); font-weight: 800; margin-bottom: 0.5em; }
.canvas-body h2 { font-size: calc(var(--live-font-size) * 2.0); font-weight: 700; margin-bottom: 0.5em; }
.canvas-body h3 { font-size: calc(var(--live-font-size) * 1.5); font-weight: 600; margin-bottom: 0.5em; }
.canvas-body p  { font-size: var(--live-font-size); opacity: 0.8; line-height: 1.5; }

/* Navbar Architectures */
.wf-navbar {
    width: 100%;
        display: flex;
    align-items: center;
    box-sizing: border-box;
    transition: all 0.5s ease;
    position: relative; /* Enforce stacking context */
    z-index: 100;       /* Above everything in the card */
}


.nav-links { display: flex; gap: 1.5em; align-items: center; }
.nav-links a {
    text-decoration: none;
    color: var(--live-text);
    font-size: calc(var(--live-font-size) * 0.9) !important;
    font-weight: 600;
    opacity: 0.8;
    transition: 0.3s;
}
.nav-links a:hover { opacity: 1; color: var(--live-primary); }

.nav-style-classic {

    margin: 0 auto;
    background: transparent;
    backdrop-filter: none;
    border-bottom: none;
    display: flex;
    justify-content: flex-end; /* Links on the Left (RTL) */
    padding: 1.5em 1.5em 1.5em; /* Refined horizontal padding */
    border-radius: var(--card-radius);
    overflow: hidden;
}


.nav-style-classic .nav-links {
    margin-right: auto; /* Push links to the left edge */
}



/* DEVELOPING: Split Brand Enhancement (Unclickable/Draft)
.nav-style-split {
    width: 100%;
    justify-content: space-between;
    background: transparent;
    border-bottom: none; 
    padding: 2.5em 3em 1.5em;
    border-radius: var(--card-radius);
    opacity: 0.5;
    pointer-events: none;
}
*/

/* Layout 4: The Segmented Buttons (NEW - Individual Glass Tabs) */
.nav-style-buttons {

    margin: 0 auto;
    display: flex;
    justify-content: flex-end; /* Left in RTL */
    background: transparent;
    border-bottom: none; 
    padding: 2.5em 0em 1.5em; /* Island-optimized padding */
}

.nav-style-buttons .nav-links {
    margin-right: auto; /* Force-push to the LEFT */
    gap: 0.8em;
}



.nav-style-buttons .nav-links a {
    padding: 0.8em 1.5em;
    background: var(--glass-bg); /* SSOT Material */
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    border-radius: 12px;
    font-size: 0.85em;
    transition: all 0.3s ease;
    opacity: 1; /* Fully visible background */
}


.nav-style-buttons .nav-links a:hover {
    background: rgba(var(--live-primary-rgb), 0.1);
    border-color: var(--live-primary);
    color: var(--live-primary);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}







.nav-style-pill {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 2.5em 0 0; /* Vertical space is now managed by zone margin */
}

.nav-style-pill .wf-navbar, #master-preview .nav-style-pill .wf-navbar {
    width: fit-content;
    height: 3.2em; /* Explicit height for better centering in pill */
    justify-content: center;
    background: var(--glass-bg); /* SSOT Material */
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    border-radius: 50px;
    padding: 0 2.5em;
    box-shadow: var(--glass-shadow);
    margin-bottom: 2em;
}






/* Universal Card Architecture */
.wf-nav-zone {
    margin-bottom: 2.5em; /* SSOT: Manage space between nav and content here */
}

.wf-identity-card {
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    transition: all 0.5s ease;
    overflow: visible; 
    direction: rtl;
    text-align: right;
}

/* Inner Card Styles (The Glass Shell) */
.id-content-card,
.wf-inner-card {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--card-radius);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    overflow: visible;
}

/* Unified Section Cards (Inner Shell) */
.id-content-card,
.wf-inner-card,
.portfolio-stack-inner,
.module-section-block-inner {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: var(--card-radius);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

/* Unified Interior Padding (SSOT) */
.id-content-card, 
.wf-inner-card { 
    padding: var(--card-padding, 2.5rem); 
}

/* Force override for specific cards without !important */
#master-preview .id-content-card, 
#master-preview #skills-preview, 
#master-preview [id^="portfolio-preview"], 
#master-preview #modules-preview {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
}

/* Specific Shorter Padding for Step 1 */
#palette-preview {
    padding: 1.5rem 2em;
}




@media (max-width: 768px) {
    .wf-content-zone { --card-padding: 1.5em; }
}


/* Avatar Master Rules */
#wf-avatar, .palette-avatar, .wf-avatar-master {
    --avatar-border: 3px;
    width: 6em;
    height: 6em;
    border-radius: 50%;
    background: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    border: var(--avatar-border) solid var(--live-primary);
    box-shadow: 0 0.5em 2em rgba(0,0,0,0.15);
    background-size: cover;
    background-position: center;
    transition: all 0.5s ease;
    font-size: var(--avatar-icon-size);
    color: var(--avatar-icon-color);
}

@media (max-width: 768px) {
    #wf-avatar, .palette-avatar, .wf-avatar-master {
        --avatar-border: 2px;
        width: 4.5em;
        height: 4.5em;
    }
}