/* ==========================================================================
   SECTION 1: HOMEPAGE STYLES (PURPLE & SILVER MODERN GRAPHIC THEME)
   ========================================================================== */
body.home-page {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: #1e112c; /* Deep obsidian purple background */
    color: #f1f5f9;            /* Crisp silver-white text for readability */
    max-width: 1024px;         /* Widened slightly to support side-by-side grid graphics cleanly */
    margin: 0 auto;
    padding: 4rem 2rem;
    line-height: 1.6;
}

/* Graphic Header Accent Grouping */
body.home-page header {
    background: linear-gradient(135deg, rgba(46, 31, 60, 0.4) 0%, rgba(30, 17, 44, 0) 100%);
    padding: 2rem;
    border-radius: 16px;
    border-left: 4px solid #c084fc; /* Bright neon violet vertical graphic bar anchor */
    margin-bottom: 2rem;
}

body.home-page h1 {
    color: #c084fc;            /* Bright neon violet highlight */
    font-size: 2.8rem;
    margin: 0 0 0.5rem 0;
    font-weight: 800;
}

/* Style the subtitle below your name */
.subtitle {
    font-size: 1.25rem;
    color: #cbd5e1; /* Metallic silver text */
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 1.5rem;
}

/* Style your personal introduction paragraph */
.about-blurb {
    font-size: 1.1rem;
    color: #94a3b8; /* Soft slate gray for crisp reading text */
    max-width: 750px;
    margin-bottom: 0;
}

body.home-page h2 {
    color: #cbd5e1;            /* Sleek metallic silver subtitle */
    font-size: 1.8rem;
    margin-top: 4rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #475569; /* Silver-slate accent dividing line */
    padding-bottom: 0.5rem;
}

/* GRAPHIC GRID LAYOUT: Arranges cards automatically in a responsive grid matrix */
body.home-page .project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
    gap: 2rem;
    margin-top: 1.5rem;
}

/* Project card blocks styled with silver accents and interactive graphics animations */
.card {
    background-color: #2e1f3c; /* Slightly lighter deep purple for card contrast */
    border: 2px solid #cbd5e1; /* Bold metallic silver border highlight */
    border-radius: 12px;
    padding: 2rem;
    margin-top: 0;             /* Margins managed cleanly by the layout grid container */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Deepens the layout contrast */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    
    /* Graphic Transition Animation Setup */
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease;
}

/* Graphic interaction: Card lifts up and throws a deeper shadow on pointer hover */
.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
}

.card h3 {
    color: #e2e8f0;            /* Bright silver card headline */
    margin: 0 0 0.75rem 0;
    font-size: 1.4rem;
}

.card p {
    color: #94a3b8;            /* Soft slate gray for paragraph details */
    margin: 0 0 1.5rem 0;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Layout container for technology pills */
.tag-row {
    margin-bottom: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Technical language pill bubbles */
.tag {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    margin-right: 0;
    display: inline-block;
}

/* COLOR-CODED ACCENT SHADES: Maps directly to target page color schemes */
.tag.swift-tag {
    background-color: rgba(192, 132, 252, 0.15); /* Translucent neon purple */
    color: #c084fc;
    border: 1px solid rgba(192, 132, 252, 0.3);
}

.tag.java-tag {
    background-color: rgba(56, 189, 248, 0.12); /* Translucent sky blue */
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.3);
}

.tag.cpp-tag {
    background-color: rgba(230, 126, 34, 0.15); /* Translucent warm orange */
    color: #f39c12;
    border: 1px solid rgba(230, 126, 34, 0.3);
}

.tag.sql-tag {
    background-color: rgba(74, 222, 128, 0.12); /* Translucent mint green */
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.3);
}

/* Call-to-action buttons inside your cards */
.action-btn {
    display: inline-block;
    margin-top: auto;                /* Pins button consistently to card bottoms */
    background-color: #cbd5e1;       /* Metallic silver button background */
    color: #1e112c;                  /* Deep purple text for contrast */
    text-decoration: none;
    font-weight: 600;
    padding: 0.5rem 1.25rem;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: background-color 0.2s, transform 0.1s ease;
}

.action-btn:hover {
    background-color: #f1f5f9;       /* Brighter silver flash on hover */
}

.action-btn:active {
    transform: scale(0.98);          /* Micro click graphic bounce interaction feedback */
}

/* ==========================================================================
   SECTION 2: HEALTHY PAWS CASE STUDY (WIDESCREEN GREEN & GOLD GRAPHIC THEME)
   ========================================================================== */

/* Main Background Setup */
body.project-page {
    background-color: #08160e; /* Deep rich forest shadow green */
    color: #e2e8f0;            /* Silver-white primary readability text */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.75;
    max-width: 100%;           /* Overrides global max-width to display widescreen bounds */
}

/* Fixed Navigation bar formatting */
.project-nav {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: rgba(8, 22, 14, 0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid #c5a059; /* Bright satin gold hairline */
    padding: 1rem 0;
}

.nav-content {
    max-width: 100%;
    margin: 0;
    padding: 0 4rem;       /* Comfortable edge-to-edge breathing room */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.back-btn {
    color: #c5a059; /* Gold accent */
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: opacity 0.2s;
}

.back-btn:hover { opacity: 0.8; }
.nav-branding { color: #64748b; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; }

/* Large High-Density Hero Graphic Banner Section */
.editorial-hero {
    background: linear-gradient(135deg, #0c2014 0%, #05100a 100%); /* Depth gradient shift */
    border-bottom: 1px solid rgba(197, 160, 89, 0.15);
    padding: 6rem 0;
}

/* Expand the Gold Hero Header Section */
.hero-wrapper {
    max-width: 100%;
    margin: 0;
    padding: 0 4rem;
    display: flex;
    align-items: center;
    gap: 6rem;             /* Wide structural column separations */
}

.hero-text-block { flex: 2; }
.hero-logo-block { flex: 1; display: flex; justify-content: center; }

.project-badge {
    color: #c5a059;
    font-size: 0.85rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 0.75rem;
}

.editorial-hero h1 {
    font-size: 3.2rem;
    color: #f5e6c8; /* Fluid warm champagne gold */
    margin: 0 0 0.5rem 0;
    line-height: 1.15;
    font-weight: 800;
}

.author-tag { color: #849e8d; font-size: 1.1rem; margin: 0 0 1.5rem 0; }
.hero-summary { color: #cbd5e1; font-size: 1.2rem; max-width: 750px; margin: 0; line-height: 1.6; }

.editorial-logo {
    max-width: 240px;
    height: auto;
    border-radius: 24px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.6);
    border: 2px solid rgba(197, 160, 89, 0.35);
}

/* Expand the Main Two-Column Content Grid */
.editorial-container {
    max-width: 100%;
    margin: 0;
    padding: 4rem 4rem;    /* Spreads your project text across wide displays */
}

.split-row {
    display: flex;
    gap: 5rem;
    margin-bottom: 6rem;
    align-items: flex-start;
}

.narrative-column { flex: 1.4; }
.technical-sidebar { flex: 1; position: sticky; top: 6rem; }

.narrative-column h2 {
    font-size: 2rem;
    color: #f5e6c8; /* Champagne gold heading */
    margin: 0 0 1.5rem 0;
    border-bottom: 1px solid rgba(197, 160, 89, 0.2);
    padding-bottom: 0.5rem;
}

.narrative-column p {
    color: #cbd5e1;
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
}

/* Component Content Staging Cards */
.narrative-card {
    background-color: #0c2014;
    border-left: 4px solid #c5a059; /* Left vertical gold accent anchor stripe */
    border-radius: 0 12px 12px 0;
    padding: 1.75rem;
    margin: 2rem 0;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

.narrative-card h3 {
    margin-top: 0;
    color: #f5e6c8;
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

.narrative-card p {
    margin: 0 0 1rem 0;
}
.narrative-card p:last-child {
    margin-bottom: 0;
}

/* Custom Inline Local Icon Graphics Sizing Modifiers */
body.project-page .inline-icon-badge {
    width: 28px;
    height: 28px;
    vertical-align: middle;
    margin: 0 6px 0 2px;
    border-radius: 6px;
    display: inline-block;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

body.project-page .pencil-icon-badge {
    width: 22px;
    height: 22px;
    vertical-align: middle;
    margin: 0 4px;
    display: inline-block;
}

/* Sticky Technical Dashboard Container Meta Box */
.sticky-meta-box {
    background-color: #0c2014;
    border: 1px solid rgba(197, 160, 89, 0.25);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

.sticky-meta-box h3 { color: #f5e6c8; margin: 0 0 1.25rem 0; font-size: 1.25rem; font-weight: 700; }

.tech-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.pill {
    background-color: rgba(197, 160, 89, 0.12);
    color: #c5a059;
    border: 1px solid rgba(197, 160, 89, 0.3);
    padding: 0.3rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.metric-row { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 1.25rem; }
.metric-item { display: flex; justify-content: space-between; font-size: 0.95rem; margin-bottom: 0.85rem; }
.metric-item:last-child { margin-bottom: 0; }
.metric-item strong { color: #849e8d; font-weight: 500; }
.metric-item span { color: #e2e8f0; font-weight: 600; }

/* Full-Width Ribbon Component Strip Grid */
.full-width-strip {
    background: linear-gradient(180deg, #05100a 0%, #030a06 100%);
    margin: 4rem -4rem;        /* Extends across padding borders perfectly */
    padding: 5rem 4rem;
    border-top: 1px solid rgba(197, 160, 89, 0.15);
    border-bottom: 1px solid rgba(197, 160, 89, 0.15);
}

.strip-content h2 { color: #f5e6c8; margin: 0 0 0.5rem 0; font-size: 2rem; text-align: center; }
.strip-content .strip-subtitle { color: #849e8d; text-align: center; margin-bottom: 3.5rem; font-size: 1.1rem; }

.matrix-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; }
.matrix-cell {
    background-color: #0c2014;
    border-top: 4px solid #c5a059; /* Core gold system header line */
    border-radius: 0 0 8px 8px;
    padding: 2rem;
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

.matrix-cell h4 {
    margin: 0 0 1rem 0;
    color: #f5e6c8;
    font-size: 1.25rem;
}

.matrix-cell p {
    margin: 0;
    color: #cbd5e1;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* FLOATING NAV BACK-TO-TOP BUTTON GRAPHIC FOR SENIOR CAPSTONE PAGE */
body.project-page .scroll-top-anchor {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 46px;
    height: 46px;
    background-color: #0c2014;                  /* Solid deep olive background matching text cards */
    border: 2px solid #c5a059;                  /* Sharp gold bounding circle ring */
    border-radius: 50%;                         /* Cuts box corners into a perfect sphere graphic */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c5a059 !important;                  /* Gold arrow symbol text color */
    text-decoration: none;
    font-size: 1.3rem;
    font-weight: bold;
    box-shadow: 0 6px 18px rgba(0,0,0,0.45);    /* Throws a distinct depth shadow block */
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s;
    z-index: 9999;                              /* Keeps element locked cleanly on top viewport layers */
}

body.project-page .scroll-top-anchor:hover {
    transform: translateY(-4px);                /* Interactive lift bounce animation pop on hover */
    background-color: #12301e;                  /* Lightens slightly to deep forest emerald on focus */
}
/* ==========================================================================
   SECTION 3: ABOUT ME PROFILE PAGE (EARTHY BROWN & MINT GREEN GRAPHIC THEME)
   ========================================================================== */

body.about-page {
    background-color: #3d312a !important; /* Forces the deep warm brown background */
    color: #f5f5f5 !important;            /* Forces off-white text for readability */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    max-width: 800px;
    margin: 0 auto;
    padding: 4rem 2rem;
    line-height: 1.7;
}

/* Link back to home page styled with mint green */
.about-page .back-link {
    color: #4ade80 !important;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
}

.about-page .back-link:hover {
    text-decoration: underline;
}

/* Layout rule to align title and profile image side-by-side */
.about-header-container {
    display: flex;
    justify-content: space-between; /* Pushes title to the left, image to the right */
    align-items: center;            /* Vertically centers them next to each other */
    border-bottom: 2px solid #4ade80 !important; /* Re-applies your green highlight dividing bar */
    padding-bottom: 20px;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/* Remove the border bottom from the raw h1 inside this container to avoid double lines */
.about-page .about-header-container h1 {
    color: #ffffff !important;
    font-size: 2.8rem;
    font-weight: 800;
    border-bottom: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Formats your graduation photo into a clean, professional profile circle */
.profile-photo {
    width: 200px;
    height: 200px;
    object-fit: cover;               /* Prevents distortion if your photo is a rectangle */
    border-radius: 50%;              /* Turns the square image box into a perfect circle */
    border: 3px solid #4ade80;       /* Crisp mint green border outline to match headers */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    flex-shrink: 0;
}

/* Subheadings styled with green highlights */
.about-page h2 {
    color: #4ade80 !important;
    font-size: 1.6rem;
    margin-top: 3rem;
    margin-bottom: 1rem;
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

/* 1. VISUAL CONTENT CONTAINER FOR SKILLS SETS */
.skills-graphic-box {
    background-color: rgba(43, 33, 28, 0.4);
    border-left: 4px solid #4ade80; /* Mint green indicator vertical anchor line */
    border-radius: 0 8px 8px 0;
    padding: 1.5rem;
    margin: 1.5rem 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Unordered lists styling inside skills box */
.skills-graphic-box ul {
    padding-left: 1.25rem;
    margin: 0;
    list-style-type: square; /* Structural tech point tags */
}

.skills-graphic-box ul li {
    color: #f5f5f5 !important;
    margin-bottom: 0.75rem;
    font-size: 1.05rem;
}

.skills-graphic-box ul li:last-child {
    margin-bottom: 0;
}

.skills-graphic-box ul li strong {
    color: #4ade80 !important;
}

/* 2. GRAPHIC CONNECT FRAMEWORK TERMINAL SIMULATION */
.connect-box {
    background-color: #1e1612 !important; /* Deepened console backing tint */
    border: 1px solid rgba(74, 222, 128, 0.3) !important; /* Light perimeter boundary line */
    border-radius: 8px;
    margin-top: 4rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

/* Integrated layout header block for terminal frame metrics */
.connect-terminal-header {
    background-color: #2b211c;
    padding: 0.6rem 1rem;
    display: flex;
    gap: 0.45rem;
    align-items: center;
    border-bottom: 1px solid rgba(74, 222, 128, 0.15);
}

.connect-terminal-header .window-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.15);
}

.connect-terminal-header .window-dot.active-mint {
    background-color: #4ade80; /* Interactive operational status window light */
}

.connect-body {
    padding: 2rem;
}

.connect-box h3 {
    color: #4ade80 !important;
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.3rem;
    font-weight: 700;
}

.connect-body p {
    color: #cbd5e1;
    margin: 0 0 1rem 0;
    font-size: 1.05rem;
}

/* Formatted interactive output stream paths for direct contact numbers */
.connect-body .terminal-meta-stream {
    font-family: 'Courier New', Courier, monospace;
    background-color: #0c0806;
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin-top: 1.5rem;
    border-left: 3px solid #4ade80;
}

.connect-body .terminal-line {
    margin: 0.35rem 0;
    color: #4ade80; /* Bright terminal green contact font data stream */
    font-size: 0.95rem;
}

.connect-body .terminal-line span {
    color: #ffffff;
}
/* ==========================================================================
   SECTION 4: BALL GAME PROJECT PAGE (MIDNIGHT BLUE & GOLD GRAPHIC THEME)
   ========================================================================== */

/* Main Background Setup for the Ball Game Page */
body.ball-game-page {
    background-color: #0b192c; /* Deep midnight blue background */
    color: #e2e8f0;            /* Silver-white text for comfortable reading */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    max-width: 850px;          /* Adjusted to perfectly display side-by-side components */
    margin: 0 auto;
    padding: 4rem 2rem;
    line-height: 1.7;
}

/* Back navigation button using gold highlights */
body.ball-game-page .back-link {
    color: #f1c40f !important; /* Bright metallic gold */
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
}

body.ball-game-page .back-link:hover {
    text-decoration: underline;
    color: #f39c12 !important;
}

/* 1. GRAPHIC INFRASTRUCTURE HEADER BANNER BLOCK */
body.ball-game-page .project-banner {
    background: linear-gradient(135deg, #060e19 0%, #15263f 100%);
    border: 1px solid rgba(241, 196, 15, 0.25); /* Subtle gold frame outline */
    border-radius: 12px;
    padding: 2.5rem 2rem;
    margin: 2rem 0 3rem 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

body.ball-game-page .banner-title {
    font-size: 2.4rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
}

body.ball-game-page .banner-subtitle {
    font-size: 1rem;
    color: #f1c40f; /* Metallic gold category label */
    margin: 0;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

body.ball-game-page .banner-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1.25rem;
}

body.ball-game-page .meta-item {
    font-size: 0.9rem;
    color: #cbd5e1;
}

body.ball-game-page .meta-item strong {
    color: #f1c40f;
    display: block;
    margin-bottom: 0.2rem;
}

/* Main Project Title - Left as a fallback if banner isn't used */
body.ball-game-page h1 {
    color: #ffffff;
    font-size: 2.5rem;
    border-bottom: 2px solid #f1c40f !important;
    padding-bottom: 10px;
    margin-top: 2rem;
    margin-bottom: 1.5rem;
}

/* Project Subsection Headers */
body.ball-game-page h2 {
    color: #f1c40f !important; /* Gold subheaders */
    font-size: 1.6rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

/* 2. GRAPHIC CONTAINER CARDS FOR FEATURE ARCHITECTURE TEXT */
body.ball-game-page .architecture-card {
    background-color: rgba(21, 38, 63, 0.3);
    border-left: 4px solid #f1c40f; /* Vertical gold strip indicator marker */
    border-radius: 0 8px 8px 0;
    padding: 1.5rem;
    margin: 1.5rem 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Bullet list constraints inside graphic cards */
body.ball-game-page .architecture-card ul {
    padding-left: 1.25rem;
    margin: 0;
}

body.ball-game-page .architecture-card ul li {
    margin-bottom: 0.75rem;
    color: #e2e8f0;
}

body.ball-game-page .architecture-card ul li:last-child {
    margin-bottom: 0;
}

/* Specific technical label highlights inside bullet lines */
body.ball-game-page ul li strong {
    color: #f1c40f !important; /* Gold label accent */
}

/* Code Snippet Container Design */
body.ball-game-page pre {
    background-color: #060e19 !important; /* Extra deep dark navy for code editor background */
    border: 1px solid rgba(241, 196, 15, 0.2) !important;
    border-radius: 8px;
    padding: 1.5rem;
    overflow-x: auto;                     /* Enables horizontal scroll if a line of code is too long */
    margin: 1.5rem 0;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Typography styles for raw code strings */
body.ball-game-page code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9rem;
    color: #cbd5e1;                       /* Soft silver text for reading comfort */
    line-height: 1.5;
}

/* Highlight tags for code block labels */
.code-header-badge {
    display: inline-block;
    background-color: rgba(241, 196, 15, 0.1);
    color: #f1c40f !important;
    font-size: 0.8rem;
    font-weight: bold;
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    border: 1px solid rgba(241, 196, 15, 0.25);
    margin-bottom: -0.5rem;
    position: relative;
    z-index: 2;
}

/* Dashboard metric container box */
.code-summary-box {
    background-color: #15263f; /* Slightly lighter navy tint for contrast block */
    border-left: 5px solid #f1c40f !important; /* Solid gold timeline stripe */
    border-radius: 4px;
    padding: 1.75rem;
    margin-top: 4rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.code-summary-box h3 {
    color: #f1c40f !important;
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: 1.25rem;
}
/* ==========================================================================
   SECTION 5: OPERATING SYSTEMS LAB (DARK RED & GOLD GRAPHIC THEME)
   ========================================================================== */

/* Main Background Setup for the Operating Systems Page */
body.os-lab-page {
    background-color: #2b0c10; /* Deep crimson dark red background */
    color: #f1f5f9;            /* Light silver-white text for excellent legibility */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    max-width: 850px;          /* Clean scaling geometry path */
    margin: 0 auto;
    padding: 4rem 2rem;
    line-height: 1.7;
}

/* Back navigation link custom color override */
body.os-lab-page .back-link {
    color: #f39c12 !important; /* Rich amber gold highlight */
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
}

body.os-lab-page .back-link:hover {
    text-decoration: underline;
    color: #e67e22 !important;
}

/* 1. GRAPHIC INFRASTRUCTURE HEADER BANNER BLOCK */
body.os-lab-page .project-banner {
    background: linear-gradient(135deg, #170407 0%, #3d141a 100%);
    border: 1px solid rgba(243, 156, 18, 0.25); /* Muted gold border frame wire */
    border-radius: 12px;
    padding: 2.5rem 2rem;
    margin: 2rem 0 3rem 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

body.os-lab-page .banner-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
}

body.os-lab-page .banner-subtitle {
    font-size: 1rem;
    color: #f39c12; /* Rich amber gold system category label */
    margin: 0;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

body.os-lab-page .banner-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1.25rem;
}

body.os-lab-page .meta-item {
    font-size: 0.9rem;
    color: #cbd5e1;
}

body.os-lab-page .meta-item strong {
    color: #f39c12;
    display: block;
    margin-bottom: 0.2rem;
}

/* Fallback Header style left untouched */
body.os-lab-page h1 {
    color: #ffffff;
    font-size: 2.5rem;
    border-bottom: 2px solid #f39c12 !important;
    padding-bottom: 10px;
    margin-top: 2rem;
    margin-bottom: 1.5rem;
}

/* Section Subheading Elements */
body.os-lab-page h2 {
    color: #f39c12 !important; /* Metallic gold subsection header */
    font-size: 1.6rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

/* 2. GRAPHIC CONTAINER CARDS FOR STRUCTURAL CORE CONCISE ARCHITECTURES */
body.os-lab-page .architectures-card {
    background-color: rgba(61, 20, 26, 0.3);
    border-left: 4px solid #f39c12; /* Crimson panel gold vertical indicator line */
    border-radius: 0 8px 8px 0;
    padding: 1.5rem;
    margin: 1.5rem 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Bullet list parameter structures */
body.os-lab-page .architectures-card ul {
    padding-left: 1.25rem;
    margin: 0;
}

body.os-lab-page .architectures-card ul li {
    margin-bottom: 0.75rem;
    color: #cbd5e1;
}

body.os-lab-page .architectures-card ul li:last-child {
    margin-bottom: 0;
}

/* Technical bold terms inside bullet strings */
body.os-lab-page ul li strong {
    color: #f39c12 !important; /* Gold inner-label highlight */
}

/* Code Snippet Editor Block Style for the OS Lab */
body.os-lab-page pre {
    background-color: #170407 !important; /* Ultra-dark wine red block for code background */
    border: 1px solid rgba(243, 156, 18, 0.2) !important;
    border-radius: 8px;
    padding: 1.5rem;
    overflow-x: auto;
    margin: 1.5rem 0;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.6);
}

body.os-lab-page code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9rem;
    color: #e2e8f0;
    line-height: 1.5;
}

/* 3. SIMULATED APPLICATION WINDOW CONSOLE WRAPPER BLOCK */
body.os-lab-page .terminal-frame {
    background-color: #0c0204 !important; /* Midnight blackout row tint */
    border: 1px solid rgba(243, 156, 18, 0.35) !important; /* Gold perimeter wire edge ring */
    border-radius: 8px;
    margin: 1.5rem 0;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

body.os-lab-page .terminal-bar-group {
    background-color: #1d070a;
    padding: 0.5rem 1rem;
    display: flex;
    gap: 0.4rem;
    align-items: center;
    border-bottom: 1px solid rgba(243, 156, 18, 0.15);
}

body.os-lab-page .terminal-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.15);
}

body.os-lab-page .terminal-dot.amber-indicator {
    background-color: #f39c12; /* Lights up target action node container */
}

body.os-lab-page .terminal-text-area {
    padding: 1.25rem;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9rem;
    color: #f39c12; /* High-contrast terminal amber readout */
    line-height: 1.45;
    white-space: pre-wrap;
}

/* Metadata Dashboard Card styling */
.lab-summary-box {
    background-color: #3d141a; /* Lighter crimson block for layer depth contrast */
    border-left: 5px solid #f39c12 !important; /* Solid gold vertical border stripe */
    border-radius: 4px;
    padding: 1.75rem;
    margin-top: 4rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.lab-summary-box h3 {
    color: #f39c12 !important;
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: 1.25rem;
}
/* ==========================================================================
   SECTION 6: ARRAYLIST UTILITIES PAGE (DARK PINK & BLUE GRAPHIC THEME)
   ========================================================================== */

/* Main Background Setup for the ArrayList Page */
body.arraylist-page {
    background-color: #3b1122; /* Deep dark pink/berry background */
    color: #f8fafc;            /* Crisp off-white text for excellent contrast */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    max-width: 850px;          /* Perfectly balanced column alignment width */
    margin: 0 auto;
    padding: 4rem 2rem;
    line-height: 1.7;
}

/* Back navigation link custom blue override */
body.arraylist-page .back-link {
    color: #38bdf8 !important; /* Vibrant sky blue highlight */
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
}

body.arraylist-page .back-link:hover {
    text-decoration: underline;
    color: #7dd3fc !important;
}

/* 1. GRAPHIC INFRASTRUCTURE HEADER BANNER BLOCK */
body.arraylist-page .project-banner {
    background: linear-gradient(135deg, #1e0510 0%, #531c33 100%);
    border: 1px solid rgba(56, 189, 248, 0.25); /* Subtle blue frame outline */
    border-radius: 12px;
    padding: 2.5rem 2rem;
    margin: 2rem 0 3rem 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

body.arraylist-page .banner-title {
    font-size: 2.3rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
}

body.arraylist-page .banner-subtitle {
    font-size: 1rem;
    color: #38bdf8; /* Vibrant sky blue tech category label */
    margin: 0;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

body.arraylist-page .banner-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1.25rem;
}

body.arraylist-page .meta-item {
    font-size: 0.9rem;
    color: #cbd5e1;
}

body.arraylist-page .meta-item strong {
    color: #38bdf8;
    display: block;
    margin-bottom: 0.2rem;
}

/* Primary Page Header Title - Fallback legacy anchor rule */
body.arraylist-page h1 {
    color: #ffffff;
    font-size: 2.5rem;
    border-bottom: 2px solid #38bdf8 !important;
    padding-bottom: 10px;
    margin-top: 2rem;
    margin-bottom: 1.5rem;
}

/* Section Subheading Elements */
body.arraylist-page h2 {
    color: #38bdf8 !important; /* Sky blue subsection header */
    font-size: 1.6rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

/* 2. GRAPHIC CONTAINER CARDS FOR ALGORITHMIC CONTENT STAGING */
body.arraylist-page .mechanics-display-card {
    background-color: rgba(83, 28, 51, 0.25);
    border-left: 4px solid #38bdf8; /* Vertical sky blue indicators stripe */
    border-radius: 0 8px 8px 0;
    padding: 1.5rem;
    margin: 1.5rem 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Bullet list overrides inside display card */
body.arraylist-page .mechanics-display-card ul {
    padding-left: 1.25rem;
    margin: 0;
}

body.arraylist-page .mechanics-display-card ul li {
    margin-bottom: 0.75rem;
    color: #cbd5e1;
}

body.arraylist-page .mechanics-display-card ul li:last-child {
    margin-bottom: 0;
}

/* Technical bold terms inside bullets */
body.arraylist-page ul li strong {
    color: #38bdf8 !important; /* Blue label accent highlight */
}

/* Code Editor Block Style for the ArrayList Page */
body.arraylist-page pre {
    background-color: #1e0510 !important; /* Darker berry block for code container */
    border: 1px solid rgba(56, 189, 248, 0.2) !important;
    border-radius: 8px;
    padding: 1.5rem;
    overflow-x: auto;
    margin: 1.5rem 0;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.6);
}

body.arraylist-page code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9rem;
    color: #e2e8f0;
    line-height: 1.5;
}

/* 3. SIMULATED VIRTUAL RUNTIME WORKSPACE TERMINAL */
body.arraylist-page .terminal-viewport {
    background-color: #12020a !important; /* Extra deep black-pink background */
    border: 1px solid rgba(56, 189, 248, 0.35) !important; /* Sky blue container window boundary line */
    border-radius: 8px;
    margin: 1.5rem 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

body.arraylist-page .terminal-header-strip {
    background-color: #1a030e;
    padding: 0.5rem 1rem;
    display: flex;
    gap: 0.4rem;
    align-items: center;
    border-bottom: 1px solid rgba(56, 189, 248, 0.15);
}

body.arraylist-page .window-control-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.15);
}

body.arraylist-page .window-control-dot.blue-active {
    background-color: #38bdf8; /* Glows to represent active console execution layer */
}

body.arraylist-page .console-output {
    padding: 1.25rem;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.95rem;
    color: #38bdf8; /* Blue text color to denote console readouts */
    background: transparent !important;
    border: none !important;
    border-radius: 0;
    margin: 0;
    white-space: pre-wrap; /* Keeps your exact newline spacings intact */
    box-shadow: none;
}

/* Highlight tags for code block labels */
.code-header-badge {
    display: inline-block;
    background-color: rgba(56, 189, 248, 0.1);
    color: #38bdf8 !important;
    font-size: 0.8rem;
    font-weight: bold;
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    border: 1px solid rgba(56, 189, 248, 0.25);
    margin-bottom: -0.5rem;
    position: relative;
    z-index: 2;
}

/* Technical Summary Metadata Box */
.utility-summary-box {
    background-color: #531c33; /* Intermediate pink layer depth contrast */
    border-left: 5px solid #38bdf8 !important; /* Sky blue border timeline stripe */
    border-radius: 4px;
    padding: 1.75rem;
    margin-top: 4rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.utility-summary-box h3 {
    color: #38bdf8 !important;
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: 1.25rem;
}
/* ==========================================================================
   SECTION 7: C++ ASSIGNMENT 4 PAGE (DARK ORANGE & GREEN GRAPHIC THEME)
   ========================================================================== */

/* Main Background Setup for the C++ Assignment 4 Page */
body.cpp-project-page {
    background-color: #3d1a04; /* Deep, muted dark orange background */
    color: #f1f5f9;            /* Readable off-white text */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    max-width: 850px;          /* Clean scaling geometry path alignment */
    margin: 0 auto;
    padding: 4rem 2rem;
    line-height: 1.7;
}

/* Back navigation link custom green override */
body.cpp-project-page .back-link {
    color: #4ade80 !important; /* Vibrant mint green highlight */
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
}

body.cpp-project-page .back-link:hover {
    text-decoration: underline;
    color: #2ecc71 !important;
}

/* 1. GRAPHIC INFRASTRUCTURE HEADER BANNER BLOCK */
body.cpp-project-page .project-banner {
    background: linear-gradient(135deg, #1c0b02 0%, #592503 100%);
    border: 1px solid rgba(74, 222, 128, 0.25); /* Subdued green framework outline */
    border-radius: 12px;
    padding: 2.5rem 2rem;
    margin: 2rem 0 3rem 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

body.cpp-project-page .banner-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
}

body.cpp-project-page .banner-subtitle {
    font-size: 1rem;
    color: #4ade80; /* Vibrant mint green tech system label */
    margin: 0;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

body.cpp-project-page .banner-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1.25rem;
}

body.cpp-project-page .meta-item {
    font-size: 0.9rem;
    color: #cbd5e1;
}

body.cpp-project-page .meta-item strong {
    color: #4ade80;
    display: block;
    margin-bottom: 0.2rem;
}

/* Primary Page Header Title - Fallback legacy anchor rule */
body.cpp-project-page h1 {
    color: #ffffff;
    font-size: 2.5rem;
    border-bottom: 2px solid #4ade80 !important;
    padding-bottom: 10px;
    margin-top: 2rem;
    margin-bottom: 1.5rem;
}

/* Section Subheading Elements */
body.cpp-project-page h2 {
    color: #4ade80 !important; /* Mint green subsection header text */
    font-size: 1.6rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

/* 2. GRAPHIC CONTAINER CARDS FOR IMPLEMENTATION CONTENT OVERLAYS */
body.cpp-project-page .oop-mechanics-card {
    background-color: rgba(89, 37, 3, 0.25);
    border-left: 4px solid #4ade80; /* Left vertical mint green accent line strip */
    border-radius: 0 8px 8px 0;
    padding: 1.5rem;
    margin: 1.5rem 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Bullet list style overrides inside layout cards */
body.cpp-project-page .oop-mechanics-card ul {
    padding-left: 1.25rem;
    margin: 0;
}

body.cpp-project-page .oop-mechanics-card ul li {
    margin-bottom: 0.75rem;
    color: #cbd5e1;
}

body.cpp-project-page .oop-mechanics-card ul li:last-child {
    margin-bottom: 0;
}

/* Technical bold terms inside bullets */
body.cpp-project-page ul li strong {
    color: #4ade80 !important; /* Mint green text highlight */
}

/* Code Editor Block Style for the C++ Page */
body.cpp-project-page pre {
    background-color: #1c0b02 !important; /* Deep blackened-orange container fill */
    border: 1px solid rgba(74, 222, 128, 0.2) !important;
    border-radius: 8px;
    padding: 1.5rem;
    overflow-x: auto;
    margin: 1.5rem 0;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.6);
}

body.cpp-project-page code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9rem;
    color: #e2e8f0;
    line-height: 1.5;
}

/* 3. VIRTUAL COMPILER EXECUTION TERMINAL LAYER GRAPHIC */
body.cpp-project-page .terminal-container-box {
    background-color: #0c0400 !important; /* Near black background tint */
    border: 1px solid rgba(74, 222, 128, 0.35) !important; /* Mint green terminal window outline */
    border-radius: 8px;
    margin: 1.5rem 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

body.cpp-project-page .terminal-header-strip {
    background-color: #160701;
    padding: 0.5rem 1rem;
    display: flex;
    gap: 0.4rem;
    align-items: center;
    border-bottom: 1px solid rgba(74, 222, 128, 0.15);
}

body.cpp-project-page .window-dot-control {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.15);
}

body.cpp-project-page .window-dot-control.green-active {
    background-color: #4ade80; /* Glow indicator dot active frame map */
}

body.cpp-project-page .console-output-window {
    padding: 1.25rem;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.95rem;
    color: #4ade80; /* Bright terminal green console stream text */
    background: transparent !important;
    border: none !important;
    border-radius: 0;
    margin: 0;
    white-space: pre-wrap; /* Preserves raw formatting configurations */
    box-shadow: none;
}

/* Highlight tags for code block labels */
.code-header-badge {
    position: relative;
    z-index: 2;
    display: inline-block;
    margin-bottom: -0.5rem;
}

/* Technical Summary Metadata Box */
.cpp-summary-panel {
    background-color: #592503; /* Intermediate orange elevation block */
    border-left: 5px solid #4ade80 !important; /* Green stripe indicator line */
    border-radius: 4px;
    padding: 1.75rem;
    margin-top: 4rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.cpp-summary-panel h3 {
    color: #4ade80 !important;
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: 1.25rem;
}
/* ==========================================================================
   SECTION 8: SQL DATABASE QUERIES PAGE (MID-GREEN & PINK GRAPHIC THEME)
   ========================================================================== */

/* Main Background Setup for the SQL Queries Page */
body.sql-project-page {
    background-color: #6e472a; /* Rich mid-brown background */
    color: #ffffff;            /* High-contrast crisp white body text */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    max-width: 850px;
    margin: 0 auto;
    padding: 4rem 2rem;
    line-height: 1.7;
}

/* Back navigation link custom pink override */
body.sql-project-page .back-link {
    color: #f472b6 !important; /* Soft brilliant pink highlight */
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
}

body.sql-project-page .back-link:hover {
    text-decoration: underline;
    color: #f43f5e !important;
}

/* 1. GRAPHIC INFRASTRUCTURE HEADER BANNER BLOCK */
body.sql-project-page .project-banner {
    background: linear-gradient(135deg, #1b5e20 0%, #0d3c11 100%);
    border: 1px solid rgba(244, 114, 182, 0.25); /* Subtle pink frame wrap */
    border-radius: 12px;
    padding: 2.5rem 2rem;
    margin: 2rem 0 3rem 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

body.sql-project-page .banner-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
}

body.sql-project-page .banner-subtitle {
    font-size: 1rem;
    color: #f472b6; /* Pink category subtitle text label */
    margin: 0;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

body.sql-project-page .banner-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1.25rem;
}

body.sql-project-page .meta-item {
    font-size: 0.9rem;
    color: #cbd5e1;
}

body.sql-project-page .meta-item strong {
    color: #f472b6;
    display: block;
    margin-bottom: 0.2rem;
}

/* Fallback Page Header Title */
body.sql-project-page h1 {
    color: #ffffff;
    font-size: 2.4rem;
    border-bottom: 3px solid #f472b6 !important;
    padding-bottom: 12px;
    margin-top: 2rem;
    margin-bottom: 1.5rem;
}

/* Section Subheading Elements */
body.sql-project-page h2 {
    color: #f472b6 !important; /* Pink subsection subtitle text */
    font-size: 1.5rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

/* 2. GRAPHIC CONTAINER CARD FOR DATABASE OPERATIONS */
body.sql-project-page .queries-staging-card {
    background-color: rgba(27, 94, 32, 0.25);
    border-left: 4px solid #f472b6; /* Left vertical pink accent anchor line */
    border-radius: 0 8px 8px 0;
    padding: 1.5rem;
    margin: 1.5rem 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Bullet list overrides inside layout cards */
body.sql-project-page .queries-staging-card ul {
    padding-left: 1.25rem;
    margin: 0;
}

body.sql-project-page .queries-staging-card ul li {
    margin-bottom: 0.75rem;
    color: #f1f5f9;
}

body.sql-project-page .queries-staging-card ul li:last-child {
    margin-bottom: 0;
}

/* Technical bold terms inside bullets */
body.sql-project-page ul li strong {
    color: #f472b6 !important; /* Pink list term highlights */
}

/* 3. COHESIVE MAC OS TERMINAL CONTAINER APPARATUS */
body.sql-project-page .mac-terminal-window {
    background-color: #000000 !important; /* Solid matte black shell boundary frame */
    border: 1px solid rgba(244, 114, 182, 0.35) !important; /* Delicate pink frame border wrap */
    border-radius: 8px;
    margin: 1.5rem 0;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    position: relative;
}

/* Real-time native Mac window header strip */
body.sql-project-page .terminal-title-bar {
    background-color: #1f2937 !important; /* Forces solid header dark gray block */
    padding: 0.6rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body.sql-project-page .mac-window-buttons {
    display: flex;
    gap: 0.45rem;
}

body.sql-project-page .mac-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}

/* macOS colored buttons */
body.sql-project-page .mac-dot.close  { background-color: #ff5f56; }
body.sql-project-page .mac-dot.min    { background-color: #ffbd2e; }
body.sql-project-page .mac-dot.expand { background-color: #27c93f; }

body.sql-project-page .terminal-identity-string {
    color: #9ca3af;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Scrollable Content Viewport Window (FIXED: Overrides fallback layouts to lock solid black background) */
body.sql-project-page .terminal-box {
    background-color: #000000 !important; /* Forces complete solid black interior fill overlay */
    padding: 1.5rem;
    overflow-x: auto;
    max-height: 450px;
    overflow-y: auto;
    border: none !important;
    border-radius: 0;
    margin: 0;
    box-shadow: none;
}

body.sql-project-page .terminal-box pre {
    margin: 0;
    background-color: #000000 !important; /* Forces deep code background box layer fill */
    border: none !important;
    padding: 0 !important;
}

body.sql-project-page .terminal-box code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.95rem;
    color: #f472b6 !important; /* High-contrast crisp pink terminal log font string */
    line-height: 1.45;
    background-color: #000000 !important;
}

/* Technical Summary Metadata Box */
.sql-summary-panel {
    background-color: #1b5e20; /* Deep forest green elevation contrast panel */
    border-left: 5px solid #f472b6 !important; /* Pink timeline indicator bar */
    border-radius: 4px;
    padding: 1.75rem;
    margin-top: 4rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.sql-summary-panel h3 {
    color: #f472b6 !important;
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: 1.25rem;
}
/* ==========================================================================
   SECTION 9: LINUX & SCHEMA ENVIRONMENT PAGE (WARM BROWN & BLUE GRAPHIC THEME)
   ========================================================================== */

/* Main Background Setup for the Linux & SQL Initialization Page */
body.linux-sql-page {
    background-color: #6e472a; /* Smooth mid-brown / warm walnut background */
    color: #ffffff;            /* Clean white text for strong readability */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    max-width: 850px;
    margin: 0 auto;
    padding: 4rem 2rem;
    line-height: 1.7;
}

/* Back navigation link custom blue override */
body.linux-sql-page .back-link {
    color: #38bdf8 !important; /* Vibrant sapphire/sky blue link highlight */
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
}

body.linux-sql-page .back-link:hover {
    text-decoration: underline;
    color: #7dd3fc !important;
}

/* 1. GRAPHIC INFRASTRUCTURE HEADER BANNER BLOCK */
body.linux-sql-page .project-banner {
    background: linear-gradient(135deg, #1e1612 0%, #4a2f1b 100%);
    border: 1px solid rgba(56, 189, 248, 0.25); /* Subtle blue frame border edge */
    border-radius: 12px;
    padding: 2.5rem 2rem;
    margin: 2rem 0 3rem 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

body.linux-sql-page .banner-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
}

body.linux-sql-page .banner-subtitle {
    font-size: 1rem;
    color: #38bdf8; /* Sky blue category subtitle label text */
    margin: 0;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

body.linux-sql-page .banner-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1.25rem;
}

body.linux-sql-page .meta-item {
    font-size: 0.9rem;
    color: #cbd5e1;
}

body.linux-sql-page .meta-item strong {
    color: #38bdf8;
    display: block;
    margin-bottom: 0.2rem;
}

/* Primary Page Header Title - Fallback anchor style */
body.linux-sql-page h1 {
    color: #ffffff;
    font-size: 2.4rem;
    border-bottom: 3px solid #38bdf8 !important;
    padding-bottom: 12px;
    margin-top: 2rem;
    margin-bottom: 1.5rem;
}

/* Section Subheading Elements */
body.linux-sql-page h2 {
    color: #38bdf8 !important; /* Blue subtitle font headers */
    font-size: 1.5rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

/* 2. GRAPHIC CONTAINER CARD FOR ENVIRONMENT INFRASTRUCTURE OVERLAYS */
body.linux-sql-page .env-staging-card {
    background-color: rgba(74, 47, 27, 0.25);
    border-left: 4px solid #38bdf8; /* Left vertical blue accent indicator stripe */
    border-radius: 0 8px 8px 0;
    padding: 1.5rem;
    margin: 1.5rem 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Bullet list style overrides inside containers */
body.linux-sql-page .env-staging-card ul {
    padding-left: 1.25rem;
    margin: 0;
}

body.linux-sql-page .env-staging-card ul li {
    margin-bottom: 0.75rem;
    color: #f8fafc;
}

body.linux-sql-page .env-staging-card ul li:last-child {
    margin-bottom: 0;
}

/* Technical bold terms inside bullets */
body.linux-sql-page ul li strong {
    color: #38bdf8 !important; /* Blue label highlights */
}

/* Document Meta-Header Fallback Configuration */
body.linux-sql-page .meta-header {
    background-color: rgba(15, 23, 42, 0.35);
    border-left: 4px solid #38bdf8;
    padding: 1rem 1.25rem;
    border-radius: 0 8px 8px 0;
    margin-bottom: 2rem;
    color: #f1f5f9;
}

/* 3. COHESIVE MAC OS TERMINAL CONTAINER APPARATUS */
body.linux-sql-page .mac-terminal-window {
    background-color: #000000 !important; /* Solid matte black terminal boundary shell frame */
    border: 1px solid rgba(56, 189, 248, 0.35) !important; /* Delicate sky-blue window frame wrapper */
    border-radius: 8px;
    margin: 1.5rem 0;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    position: relative;
}

/* Real-time native Mac title bar header strip components */
body.linux-sql-page .terminal-title-bar {
    background-color: #1f2937 !important; /* Solid header slate dark gray layer block */
    padding: 0.6rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body.linux-sql-page .mac-window-buttons {
    display: flex;
    gap: 0.45rem;
}

body.linux-sql-page .mac-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}

/* macOS standard layout window indicator control tags */
body.linux-sql-page .mac-dot.close  { background-color: #ff5f56; }
body.linux-sql-page .mac-dot.min    { background-color: #ffbd2e; }
body.linux-sql-page .mac-dot.expand { background-color: #27c93f; }

body.linux-sql-page .terminal-identity-string {
    color: #9ca3af;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Scrollable Content Viewport Window (FORCED SOLID MATTE BLACK BACKGROUND) */
body.linux-sql-page .terminal-container {
    background-color: #000000 !important; /* Forces total dark interior overlay block fill */
    padding: 1.5rem;
    overflow-x: auto;
    max-height: 450px;
    overflow-y: auto;
    border: none !important;
    border-radius: 0;
    margin: 0;
    box-shadow: none;
}

body.linux-sql-page .terminal-container pre {
    margin: 0;
    background-color: #000000 !important; /* Forces layout code background layer box fill */
    border: none !important;
    padding: 0 !important;
}

body.linux-sql-page .terminal-container code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.95rem;
    color: #38bdf8 !important; /* High-contrast vibrant blue console stream text strings */
    line-height: 1.45;
    background-color: #000000 !important;
}

/* Technical Summary Metadata Box */
.env-summary-panel {
    background-color: #4a2f1b; /* Deep chocolate contrast layout block */
    border-left: 5px solid #38bdf8 !important; /* Blue vertical identity bar */
    border-radius: 4px;
    padding: 1.75rem;
    margin-top: 4rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

.env-summary-panel h3 {
    color: #38bdf8 !important;
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: 1.25rem;
}
/* ==========================================================================
   SECTION 10: C++ STL CONCEPTS PAGE (DARK PURPLE & YELLOW GRAPHIC THEME)
   ========================================================================== */

/* Main Background Setup for the C++ STL Page */
body.cpp-stl-page {
    background-color: #261132; /* Rich dark purple / deep amethyst background */
    color: #ffffff;            /* High-contrast crisp white body text */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    max-width: 850px;
    margin: 0 auto;
    padding: 4rem 2rem;
    line-height: 1.7;
}

/* Back navigation link custom yellow override */
body.cpp-stl-page .back-link {
    color: #f1c40f !important; /* Sharp radiant yellow highlight */
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
}

body.cpp-stl-page .back-link:hover {
    text-decoration: underline;
    color: #f39c12 !important;
}

/* 1. GRAPHIC INFRASTRUCTURE HEADER BANNER BLOCK */
body.cpp-stl-page .project-banner {
    background: linear-gradient(135deg, #14051c 0%, #3e1e50 100%);
    border: 1px solid rgba(241, 196, 15, 0.3); /* Subtle yellow perimeter border outline */
    border-radius: 12px;
    padding: 2.5rem 2rem;
    margin: 2rem 0 3rem 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

body.cpp-stl-page .banner-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
}

body.cpp-stl-page .banner-subtitle {
    font-size: 1rem;
    color: #f1c40f; /* Radiant yellow tech category subtitle label */
    margin: 0;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

body.cpp-stl-page .banner-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1.25rem;
}

body.cpp-stl-page .meta-item {
    font-size: 0.9rem;
    color: #cbd5e1;
}

body.cpp-stl-page .meta-item strong {
    color: #f1c40f;
    display: block;
    margin-bottom: 0.2rem;
}

/* Section Subheading Elements */
body.cpp-stl-page h2 {
    color: #f1c40f !important; /* Yellow subsection title text */
    font-size: 1.5rem;
    margin-top: 3rem;
    margin-bottom: 1rem;
}

/* 2. GRAPHIC CONTAINER CARDS FOR BULLET LIST TEXT */
body.cpp-stl-page .mechanics-card {
    background-color: rgba(20, 5, 28, 0.5);
    border-left: 4px solid #f1c40f; /* Neon yellow left accent strip block anchor */
    border-radius: 0 8px 8px 0;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

/* Bullet list style overrides inside graphic cards */
body.cpp-stl-page .mechanics-card ul {
    padding-left: 1.25rem;
    margin: 0;
}

body.cpp-stl-page .mechanics-card ul li {
    margin-bottom: 0.75rem;
    color: #f1f5f9;
}

body.cpp-stl-page .mechanics-card ul li:last-child {
    margin-bottom: 0;
}

body.cpp-stl-page ul li strong {
    color: #f1c40f !important; /* Yellow text bold accents */
}

/* Source Code Editor Layout Display Box */
body.cpp-stl-page pre {
    background-color: #14051c !important; /* Deep blackened purple internal block code box */
    border: 1px solid rgba(241, 196, 15, 0.2) !important;
    border-radius: 8px;
    padding: 1.5rem;
    overflow-x: auto;
    margin: 1.5rem 0;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.6);
}

body.cpp-stl-page code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9rem;
    color: #e2e8f0;
    line-height: 1.5;
}

/* 3. INTERACTIVE CONSOLE VISUALIZATION WINDOW WRAPPER */
body.cpp-stl-page .terminal-window {
    background-color: #0c0211 !important; /* Deep obsidian background */
    border: 1px solid rgba(241, 196, 15, 0.4) !important; /* Neon yellow boundary wire ring */
    border-radius: 8px;
    margin: 1.5rem 0;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

/* Virtual Mac/Linux application title bar graphic simulation */
body.cpp-stl-page .terminal-header-strip {
    background-color: #190923;
    padding: 0.5rem 1rem;
    display: flex;
    gap: 0.4rem;
    align-items: center;
    border-bottom: 1px solid rgba(241, 196, 15, 0.15);
}

body.cpp-stl-page .dot {
    width: 10px;
    height: 10px;
    border-radius: 55px;
    background-color: rgba(255, 255, 255, 0.2); /* Sleek translucent dashboard control dots */
}

body.cpp-stl-page .dot.yellow-accent {
    background-color: #f1c40f; /* Light up active tracking indicator window node */
}

body.cpp-stl-page .terminal-body {
    padding: 1.25rem;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9rem;
    color: #f1c40f; /* High-visibility console stream yellow readout text */
    line-height: 1.45;
    white-space: pre-wrap;
}

/* Technical Summary Metadata Box */
.stl-summary-panel {
    background-color: #3e1e50; /* Intermediate purple container elevation */
    border-left: 5px solid #f1c40f !important; /* Yellow tracking border stripe */
    border-radius: 4px;
    padding: 1.75rem;
    margin-top: 4rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.stl-summary-panel h3 {
    color: #f1c40f !important;
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: 1.25rem;
}