/* Import fonts for a blend of retro mono and modern sans-serif */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&family=Inter:wght@400;700&display=swap');

/* Base Theme: Original (Warm Tones) */
body.theme-original {
    --bg-primary: #F8F5F1; /* Warm off-white background */
    --text-primary: #4A403A; /* Muted dark brown text */
    --header-bg: #C7B8A6; /* Muted light brown title bar */
    --header-border: #7D7068; /* Darker border for header */
    --header-highlight: #FFFFFF; /* White highlight for header 3D effect */
    --app-container-bg: #FFFFFF; /* White window background */
    --app-container-border: #7D7068; /* Muted dark brown window border */
    --app-container-highlight: #C7B8A6; /* 3D highlight for window */
    --shadow-color: rgba(74, 64, 58, 0.3); /* Soft dark brown drop shadow */
    --scrollbar-track: #E5DCCF; /* Soft light brown scrollbar track */
    --scrollbar-thumb: #A69584; /* Darker muted brown scrollbar thumb */
    --scrollbar-thumb-hover: #8F7D6C; /* Slightly darker on hover */
    --selection-bg: #CCB7A5; /* Muted terracotta selection */
    --link-color: #CCB7A5; /* Muted terracotta link color */
    --link-hover-color: #9C8978; /* Darker terracotta on hover */
    --section-border: #7D7068; /* Muted dark brown section border */
    --section-highlight: #C7B8A6; /* Section 3D highlight */
    --tag-bg: #E5DCCF; /* Soft light brown tag background */
    --tag-border: #7D7068; /* Tag border */
    --tag-shadow: #C7B8A6; /* Tag shadow */
    --button-bg: #E5DCCF; /* Soft light brown button */
    --button-text: #4A403A; /* Button text */
    --button-border-dark: #7D7068; /* Button dark border */
    --button-border-light: #C7B8A6; /* Button light border */
    --button-hover-bg: #D4C9BD; /* Button hover background */
    --button-active-bg: #C7B8A6; /* Button active background */
    --action-button-bg: #8D99AE; /* Muted blue-grey action button */
    --action-button-text: #FFFFFF; /* White action button text */
    --action-button-border-dark: #5C677D; /* Darker blue-grey action border */
    --action-button-border-light: #ADBDD1; /* Lighter highlight action border */
    --action-button-shadow: rgba(74, 64, 58, 0.4); /* Darker action button shadow */
    --action-button-hover-bg: #7A899C; /* Action button hover */
    --action-button-active-bg: #6B778D; /* Action button active */
    --placeholder-bg: #E5DCCF; /* Placeholder background */
    --placeholder-border: #7D7068; /* Placeholder border */
    --placeholder-text: #7D7068; /* Placeholder text */
    --footer-bg: #E5DCCF; /* Footer background */
    --footer-border: #7D7068; /* Footer border */
    --modal-bg: #E5DCCF; /* Modal background */
    --modal-border: #7D7068; /* Modal border */
    --modal-highlight: #C7B8A6; /* Modal highlight */
}

/* Dark Mode for Original Theme */
body.theme-original.dark-mode {
    --bg-primary: #2C3E50; /* Dark blue-grey background */
    --text-primary: #ECF0F1; /* Light grey text */
    --header-bg: #34495E; /* Slightly darker header */
    --header-border: #212F3D; /* Even darker border */
    --header-highlight: #4A6278; /* Subtle highlight */
    --app-container-bg: #3B526B; /* Dark window background */
    --app-container-border: #212F3D; /* Dark window border */
    --app-container-highlight: #4A6278; /* Dark window highlight */
    --shadow-color: rgba(0, 0, 0, 0.6); /* Darker shadow */
    --scrollbar-track: #4A6278; /* Dark scrollbar track */
    --scrollbar-thumb: #6D87A0; /* Dark scrollbar thumb */
    --scrollbar-thumb-hover: #829BB4; /* Darker on hover */
    --selection-bg: #6B778D; /* Muted blue selection */
    --link-color: #8D99AE; /* Muted blue link color */
    --link-hover-color: #ADBDD1; /* Lighter blue on hover */
    --section-border: #212F3D; /* Dark section border */
    --section-highlight: #4A6278; /* Dark section highlight */
    --tag-bg: #34495E; /* Dark tag background */
    --tag-border: #212F3D; /* Dark tag border */
    --tag-shadow: #4A6278; /* Dark tag shadow */
    --button-bg: #4A6278; /* Dark button */
    --button-text: #ECF0F1; /* Button text */
    --button-border-dark: #212F3D; /* Button dark border */
    --button-border-light: #6D87A0; /* Button light border */
    --button-hover-bg: #5D728A; /* Button hover background */
    --button-active-bg: #6D87A0; /* Button active background */
    --action-button-bg: #A349A4; /* Curated purple action button */
    --action-button-text: #FFFFFF; /* White action button text */
    --action-button-border-dark: #7F2F80; /* Darker purple action border */
    --action-button-border-light: #C47AC5; /* Lighter highlight action border */
    --action-button-shadow: rgba(0, 0, 0, 0.5); /* Darker action button shadow */
    --action-button-hover-bg: #925193; /* Action button hover */
    --action-button-active-bg: #7F2F80; /* Action button active */
    --placeholder-bg: #34495E; /* Placeholder background */
    --placeholder-border: #212F3D; /* Placeholder border */
    --placeholder-text: #6D87A0; /* Placeholder text */
    --footer-bg: #34495E; /* Footer background */
    --footer-border: #212F3D; /* Footer border */
    --modal-bg: #34495E; /* Modal background */
    --modal-border: #212F3D; /* Modal border */
    --modal-highlight: #4A6278; /* Modal highlight */
}

/* Theme: Ocean */
body.theme-ocean {
    --bg-primary: #E0F2F7; /* Light cyan-blue */
    --text-primary: #1A5276; /* Deep ocean blue */
    --header-bg: #85C1E9; /* Medium blue */
    --header-border: #2E86C1; /* Darker blue */
    --header-highlight: #A9CCE3; /* Lighter blue */
    --app-container-bg: #FFFFFF;
    --app-container-border: #2E86C1;
    --app-container-highlight: #85C1E9;
    --shadow-color: rgba(46, 134, 193, 0.3);
    --scrollbar-track: #AED6F1;
    --scrollbar-thumb: #5DADE2;
    --scrollbar-thumb-hover: #2E86C1;
    --selection-bg: #A9CCE3;
    --link-color: #5DADE2;
    --link-hover-color: #2E86C1;
    --section-border: #2E86C1;
    --section-highlight: #85C1E9;
    --tag-bg: #D6EAF8;
    --tag-border: #5DADE2;
    --tag-shadow: #A9CCE3;
    --button-bg: #A9CCE3;
    --button-text: #1A5276;
    --button-border-dark: #2E86C1;
    --button-border-light: #AED6F1;
    --button-hover-bg: #85C1E9;
    --button-active-bg: #5DADE2;
    --action-button-bg: #1ABC9C; /* Teal */
    --action-button-text: #FFFFFF;
    --action-button-border-dark: #148F77;
    --action-button-border-light: #76D7C4;
    --action-button-shadow: rgba(26, 188, 156, 0.4);
    --action-button-hover-bg: #16A085;
    --action-button-active-bg: #148F77;
    --placeholder-bg: #D6EAF8;
    --placeholder-border: #5DADE2;
    --placeholder-text: #2E86C1;
    --footer-bg: #A9CCE3;
    --footer-border: #5DADE2;
    --modal-bg: #D6EAF8;
    --modal-border: #5DADE2;
    --modal-highlight: #AED6F1;
}

body.theme-ocean.dark-mode {
    --bg-primary: #0A2E3D;
    --text-primary: #C3E7F1;
    --header-bg: #1A4D5F;
    --header-border: #0F3B4B;
    --header-highlight: #2D6B82;
    --app-container-bg: #1F455A;
    --app-container-border: #0F3B4B;
    --app-container-highlight: #2D6B82;
    --shadow-color: rgba(0, 0, 0, 0.6);
    --scrollbar-track: #2D6B82;
    --scrollbar-thumb: #47849E;
    --scrollbar-thumb-hover: #5D99B9;
    --selection-bg: #3E728B;
    --link-color: #5D99B9;
    --link-hover-color: #85C1E9;
    --section-border: #0F3B4B;
    --section-highlight: #2D6B82;
    --tag-bg: #1A4D5F;
    --tag-border: #0F3B4B;
    --tag-shadow: #2D6B82;
    --button-bg: #2D6B82;
    --button-text: #C3E7F1;
    --button-border-dark: #0F3B4B;
    --button-border-light: #47849E;
    --button-hover-bg: #3A7893;
    --button-active-bg: #47849E;
    --action-button-bg: #00B2B2;
    --action-button-text: #FFFFFF;
    --action-button-border-dark: #008D8D;
    --action-button-border-light: #00DCDC;
    --action-button-shadow: rgba(0, 0, 0, 0.5);
    --action-button-hover-bg: #009E9E;
    --action-button-active-bg: #008D8D;
    --placeholder-bg: #1A4D5F;
    --placeholder-border: #2D6B82;
    --placeholder-text: #47849E;
    --footer-bg: #2D6B82;
    --footer-border: #0F3B4B;
    --modal-bg: #1A4D5F;
    --modal-border: #2D6B82;
    --modal-highlight: #47849E;
}


/* Theme: Forest */
body.theme-forest {
    --bg-primary: #F0F7EB; /* Light green-beige */
    --text-primary: #2C3E2F; /* Dark forest green */
    --header-bg: #9ACD32; /* Yellow-green */
    --header-border: #6B8E23; /* Olive green */
    --header-highlight: #ADDF7F; /* Light lime green */
    --app-container-bg: #FFFFFF;
    --app-container-border: #6B8E23;
    --app-container-highlight: #9ACD32;
    --shadow-color: rgba(107, 142, 35, 0.3);
    --scrollbar-track: #C4E4B8;
    --scrollbar-thumb: #7FFF00;
    --scrollbar-thumb-hover: #6B8E23;
    --selection-bg: #ADDF7F;
    --link-color: #7FFF00;
    --link-hover-color: #6B8E23;
    --section-border: #6B8E23;
    --section-highlight: #9ACD32;
    --tag-bg: #D8EAC7;
    --tag-border: #A2CD48;
    --tag-shadow: #ADDF7F;
    --button-bg: #ADDF7F;
    --button-text: #2C3E2F;
    --button-border-dark: #6B8E23;
    --button-border-light: #C4E4B8;
    --button-hover-bg: #9ACD32;
    --button-active-bg: #7FFF00;
    --action-button-bg: #A0522D; /* Sienna */
    --action-button-text: #FFFFFF;
    --action-button-border-dark: #8B4513;
    --action-button-border-light: #CD853F;
    --action-button-shadow: rgba(160, 82, 45, 0.4);
    --action-button-hover-bg: #B0653B;
    --action-button-active-bg: #8B4513;
    --placeholder-bg: #D8EAC7;
    --placeholder-border: #A2CD48;
    --placeholder-text: #6B8E23;
    --footer-bg: #ADDF7F;
    --footer-border: #A2CD48;
    --modal-bg: #D8EAC7;
    --modal-border: #A2CD48;
    --modal-highlight: #C4E4B8;
}

body.theme-forest.dark-mode {
    --bg-primary: #1A281B;
    --text-primary: #D0E4C9;
    --header-bg: #2B452D;
    --header-border: #1F3320;
    --header-highlight: #3F6441;
    --app-container-bg: #253A27;
    --app-container-border: #1F3320;
    --app-container-highlight: #3F6441;
    --shadow-color: rgba(0, 0, 0, 0.6);
    --scrollbar-track: #3F6441;
    --scrollbar-thumb: #5C8C5E;
    --scrollbar-thumb-hover: #72A374;
    --selection-bg: #4F7851;
    --link-color: #72A374;
    --link-hover-color: #9ACD32;
    --section-border: #1F3320;
    --section-highlight: #3F6441;
    --tag-bg: #2B452D;
    --tag-border: #1F3320;
    --tag-shadow: #3F6441;
    --button-bg: #3F6441;
    --button-text: #D0E4C9;
    --button-border-dark: #1F3320;
    --button-border-light: #5C8C5E;
    --button-hover-bg: #4A724C;
    --button-active-bg: #5C8C5E;
    --action-button-bg: #CD853F;
    --action-button-text: #FFFFFF;
    --action-button-border-dark: #8B4513;
    --action-button-border-light: #FFDAB9;
    --action-button-shadow: rgba(0, 0, 0, 0.5);
    --action-button-hover-bg: #DDA0DD;
    --action-button-active-bg: #8B4513;
    --placeholder-bg: #2B452D;
    --placeholder-border: #3F6441;
    --placeholder-text: #5C8C5E;
    --footer-bg: #3F6441;
    --footer-border: #1F3320;
    --modal-bg: #2B452D;
    --modal-border: #3F6441;
    --modal-highlight: #5C8C5E;
}

/* Theme: Modern (Cool Greys & Blues) */
body.theme-modern {
    --bg-primary: #F2F4F8; /* Very light grey */
    --text-primary: #334155; /* Dark slate grey */
    --header-bg: #A0B9CE; /* Light steel blue */
    --header-border: #627D98; /* Medium grey-blue */
    --header-highlight: #CAD5E2; /* Lighter grey-blue */
    --app-container-bg: #FFFFFF;
    --app-container-border: #627D98;
    --app-container-highlight: #A0B9CE;
    --shadow-color: rgba(51, 65, 85, 0.3);
    --scrollbar-track: #CED9E5;
    --scrollbar-thumb: #7A90A4;
    --scrollbar-thumb-hover: #627D98;
    --selection-bg: #D1DCE8;
    --link-color: #7A90A4;
    --link-hover-color: #627D98;
    --section-border: #627D98;
    --section-highlight: #A0B9CE;
    --tag-bg: #E1E7F0;
    --tag-border: #A0B9CE;
    --tag-shadow: #CAD5E2;
    --button-bg: #CAD5E2;
    --button-text: #334155;
    --button-border-dark: #627D98;
    --button-border-light: #E1E7F0;
    --button-hover-bg: #A0B9CE;
    --button-active-bg: #7A90A4;
    --action-button-bg: #60A5FA; /* Bright blue */
    --action-button-text: #FFFFFF;
    --action-button-border-dark: #3B82F6;
    --action-button-border-light: #93C5FD;
    --action-button-shadow: rgba(96, 165, 250, 0.4);
    --action-button-hover-bg: #4A93F6;
    --action-button-active-bg: #3B82F6;
    --placeholder-bg: #E1E7F0;
    --placeholder-border: #A0B9CE;
    --placeholder-text: #7A90A4;
    --footer-bg: #CAD5E2;
    --footer-border: #A0B9CE;
    --modal-bg: #E1E7F0;
    --modal-border: #A0B9CE;
    --modal-highlight: #CED9E5;
}

body.theme-modern.dark-mode {
    --bg-primary: #1F2937; /* Darkest slate */
    --text-primary: #E2E8F0; /* Off-white */
    --header-bg: #2D3748; /* Dark grey-blue */
    --header-border: #1C242F;
    --header-highlight: #4A5568;
    --app-container-bg: #27303E;
    --app-container-border: #1C242F;
    --app-container-highlight: #4A5568;
    --shadow-color: rgba(0, 0, 0, 0.6);
    --scrollbar-track: #4A5568;
    --scrollbar-thumb: #64748B;
    --scrollbar-thumb-hover: #7F90A5;
    --selection-bg: #52627A;
    --link-color: #7F90A5;
    --link-hover-color: #A0B9CE;
    --section-border: #1C242F;
    --section-highlight: #4A5568;
    --tag-bg: #2D3748;
    --tag-border: #1C242F;
    --tag-shadow: #4A5568;
    --button-bg: #4A5568;
    --button-text: #E2E8F0;
    --button-border-dark: #1C242F;
    --button-border-light: #64748B;
    --button-hover-bg: #57657C;
    --button-active-bg: #64748B;
    --action-button-bg: #3B82F6;
    --action-button-text: #FFFFFF;
    --action-button-border-dark: #2563EB;
    --action-button-border-light: #60A5FA;
    --action-button-shadow: rgba(0, 0, 0, 0.5);
    --action-button-hover-bg: #2D7DEB;
    --action-button-active-bg: #2563EB;
    --placeholder-bg: #2D3748;
    --placeholder-border: #4A5568;
    --placeholder-text: #64748B;
    --footer-bg: #4A5568;
    --footer-border: #1C242F;
    --modal-bg: #2D3748;
    --modal-border: #4A5568;
    --modal-highlight: #64748B;
}

/* Theme: Vibrant (Bright & Energetic) */
body.theme-vibrant {
    --bg-primary: #FFF8E1; /* Very light yellow */
    --text-primary: #D32F2F; /* Deep red */
    --header-bg: #FFC107; /* Amber */
    --header-border: #FFA000; /* Darker amber */
    --header-highlight: #FFECB3; /* Lighter yellow */
    --app-container-bg: #FFFFFF;
    --app-container-border: #FFA000;
    --app-container-highlight: #FFC107;
    --shadow-color: rgba(255, 160, 0, 0.3);
    --scrollbar-track: #FFF59D;
    --scrollbar-thumb: #FFEB3B;
    --scrollbar-thumb-hover: #FFA000;
    --selection-bg: #FFECB3;
    --link-color: #FFEB3B;
    --link-hover-color: #FFA000;
    --section-border: #FFA000;
    --section-highlight: #FFC107;
    --tag-bg: #FFF9C4;
    --tag-border: #FFD54F;
    --tag-shadow: #FFECB3;
    --button-bg: #FFECB3;
    --button-text: #D32F2F;
    --button-border-dark: #FFA000;
    --button-border-light: #FFF59D;
    --button-hover-bg: #FFC107;
    --button-active-bg: #FFEB3B;
    --action-button-bg: #7B1FA2; /* Deep purple */
    --action-button-text: #FFFFFF;
    --action-button-border-dark: #6A1B9A;
    --action-button-border-light: #BA68C8;
    --action-button-shadow: rgba(123, 31, 162, 0.4);
    --action-button-hover-bg: #8B34B3;
    --action-button-active-bg: #6A1B9A;
    --placeholder-bg: #FFF9C4;
    --placeholder-border: #FFD54F;
    --placeholder-text: #FFA000;
    --footer-bg: #FFECB3;
    --footer-border: #FFD54F;
    --modal-bg: #FFF9C4;
    --modal-border: #FFD54F;
    --modal-highlight: #FFF59D;
}

body.theme-vibrant.dark-mode {
    --bg-primary: #3E100F; /* Dark red-brown */
    --text-primary: #FFCCBC; /* Light peach */
    --header-bg: #5D2625;
    --header-border: #2C0B0A;
    --header-highlight: #7D4C4B;
    --app-container-bg: #4F201F;
    --app-container-border: #2C0B0A;
    --app-container-highlight: #7D4C4B;
    --shadow-color: rgba(0, 0, 0, 0.6);
    --scrollbar-track: #7D4C4B;
    --scrollbar-thumb: #A17170;
    --scrollbar-thumb-hover: #C39796;
    --selection-bg: #8E5D5C;
    --link-color: #C39796;
    --link-hover-color: #FFC107;
    --section-border: #2C0B0A;
    --section-highlight: #7D4C4B;
    --tag-bg: #5D2625;
    --tag-border: #2C0B0A;
    --tag-shadow: #7D4C4B;
    --button-bg: #7D4C4B;
    --button-text: #FFCCBC;
    --button-border-dark: #2C0B0A;
    --button-border-light: #A17170;
    --button-hover-bg: #6A3A39;
    --button-active-bg: #A17170;
    --action-button-bg: #BA68C8;
    --action-button-text: #FFFFFF;
    --action-button-border-dark: #6A1B9A;
    --action-button-border-light: #7B1FA2;
    --action-button-shadow: rgba(0, 0, 0, 0.5);
    --action-button-hover-bg: #9A52A6;
    --action-button-active-bg: #6A1B9A;
    --placeholder-bg: #5D2625;
    --placeholder-border: #7D4C4B;
    --placeholder-text: #A17170;
    --footer-bg: #7D4C4B;
    --footer-border: #2C0B0A;
    --modal-bg: #5D2625;
    --modal-border: #7D4C4B;
    --modal-highlight: #A17170;
}

/* Theme: Sunset (Warm Oranges & Pinks) */
body.theme-sunset {
    --bg-primary: #FFF3E0; /* Light orange-yellow */
    --text-primary: #BF360C; /* Dark orange-red */
    --header-bg: #FF8F00; /* Amber orange */
    --header-border: #E65100; /* Deep orange */
    --header-highlight: #FFCC80; /* Light orange */
    --app-container-bg: #FFFFFF;
    --app-container-border: #E65100;
    --app-container-highlight: #FF8F00;
    --shadow-color: rgba(230, 81, 0, 0.3);
    --scrollbar-track: #FFECB3;
    --scrollbar-thumb: #FFB74D;
    --scrollbar-thumb-hover: #E65100;
    --selection-bg: #FFCC80;
    --link-color: #FFB74D;
    --link-hover-color: #E65100;
    --section-border: #E65100;
    --section-highlight: #FF8F00;
    --tag-bg: #FFF3E0;
    --tag-border: #FFB74D;
    --tag-shadow: #FFCC80;
    --button-bg: #FFECB3;
    --button-text: #BF360C;
    --button-border-dark: #E65100;
    --button-border-light: #FFF3E0;
    --button-hover-bg: #FF8F00;
    --button-active-bg: #FFB74D;
    --action-button-bg: #E91E63; /* Pink */
    --action-button-text: #FFFFFF;
    --action-button-border-dark: #C2185B;
    --action-button-border-light: #F06292;
    --action-button-shadow: rgba(233, 30, 99, 0.4);
    --action-button-hover-bg: #EC407A;
    --action-button-active-bg: #C2185B;
    --placeholder-bg: #FFF3E0;
    --placeholder-border: #FFB74D;
    --placeholder-text: #E65100;
    --footer-bg: #FFECB3;
    --footer-border: #FFB74D;
    --modal-bg: #FFF3E0;
    --modal-border: #FFB74D;
    --modal-highlight: #FFECB3;
}

body.theme-sunset.dark-mode {
    --bg-primary: #3D1000;
    --text-primary: #FFDAC6;
    --header-bg: #5F2500;
    --header-border: #2F1100;
    --header-highlight: #85421B;
    --app-container-bg: #4F1F00;
    --app-container-border: #2F1100;
    --app-container-highlight: #85421B;
    --shadow-color: rgba(0, 0, 0, 0.6);
    --scrollbar-track: #85421B;
    --scrollbar-thumb: #AE6D4A;
    --scrollbar-thumb-hover: #D79772;
    --selection-bg: #9C5F3E;
    --link-color: #D79772;
    --link-hover-color: #FF8F00;
    --section-border: #2F1100;
    --section-highlight: #85421B;
    --tag-bg: #5F2500;
    --tag-border: #2F1100;
    --tag-shadow: #85421B;
    --button-bg: #85421B;
    --button-text: #FFDAC6;
    --button-border-dark: #2F1100;
    --button-border-light: #AE6D4A;
    --button-hover-bg: #74371C;
    --button-active-bg: #AE6D4A;
    --action-button-bg: #F06292;
    --action-button-text: #FFFFFF;
    --action-button-border-dark: #C2185B;
    --action-button-border-light: #E91E63;
    --action-button-shadow: rgba(0, 0, 0, 0.5);
    --action-button-hover-bg: #DA3D6C;
    --action-button-active-bg: #C2185B;
    --placeholder-bg: #5F2500;
    --placeholder-border: #85421B;
    --placeholder-text: #AE6D4A;
    --footer-bg: #85421B;
    --footer-border: #2F1100;
    --modal-bg: #5F2500;
    --modal-border: #85421B;
    --modal-highlight: #AE6D4A;
}

/* Base body styles using CSS variables (fallback for when no specific theme is set) */
body {
    font-family: 'Inter', sans-serif; /* Default for body text */
    background-color: var(--bg-primary);
    color: var(--text-primary);
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    font-size: 14px;
    text-shadow: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth theme transition */
}

/* Custom selection color to fit theme */
::selection {
    background-color: var(--selection-bg);
    color: var(--text-primary);
}

/* Scrollbar styling for a simple, system look */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: 0px;
    border: 1px solid var(--app-container-highlight); /* Muted border */
}
::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 0px;
    border: 1px solid var(--app-container-border); /* Even darker muted brown border */
}
::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover); /* Slightly darker on hover */
}
::-webkit-scrollbar-corner {
    background: var(--scrollbar-track); /* Match track */
}

/* Main App Container - designed to look like a window */
.app-container {
    max-width: 400px;
    min-height: 700px;
    margin: 2rem auto;
    background-color: var(--app-container-bg);
    border: 2px solid var(--app-container-border); /* Muted dark brown window border */
    border-right: 2px solid var(--app-container-highlight); /* 3D border effect */
    border-bottom: 2px solid var(--app-container-highlight); /* 3D border effect */
    border-radius: 0px;
    box-shadow: 8px 8px 0px var(--shadow-color); /* Soft dark brown drop shadow */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

/* Header Area: Window Title Bar - now acting as a menu bar */
.header {
    background-color: var(--header-bg);
    padding: 8px 12px;
    border-bottom: 1px solid var(--header-border); /* Dark brown line separating title from content */
    border-right: 1px solid var(--header-highlight); /* Inner highlight for 3D effect */
    border-left: 1px solid var(--header-highlight);
    border-top: 1px solid var(--header-highlight);
    border-radius: 0;
    display: flex; /* Use flexbox for layout */
    justify-content: flex-start; /* Align home icon and then the nav links */
    align-items: center;
    position: relative;
    z-index: 10;
    font-size: 15px;
    font-weight: bold;
    cursor: default; /* Not draggable now, it's a menu bar */
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Home Icon on the far left */
.home-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary); /* Icon color */
    cursor: pointer;
    flex-shrink: 0; /* Prevent shrinking */
    margin-right: 12px; /* Space between home icon and first nav item */
    text-decoration: none; /* Remove underline for link */
    transition: color 0.1s linear; /* Only color transition */
    background: transparent; /* Explicitly ensure no background */
    border: none; /* Explicitly ensure no border */
    padding: 0; /* Remove any padding that might create a visible box */
}

.home-icon:hover {
    color: var(--link-hover-color); /* Highlight color on hover */
}

.home-icon svg {
    width: 16px; /* Icon size */
    height: 16px;
    display: block; /* Ensure SVG behaves as block for centering */
}

/* Main Navigation Links (horizontal) */
.main-header-nav {
    flex-grow: 1; /* Allows the nav to take up remaining space */
    display: flex; /* Make this a flex container */
    justify-content: flex-start; /* Align nav items to the left within the nav area */
    align-items: center; /* Vertically center items */
    height: 100%;
}

.main-header-nav-list {
    list-style: none;
    padding: 0;
    margin: 0; /* Removed margin-left: auto */
    display: flex; /* Make list items horizontal */
    flex-wrap: nowrap; /* Prevent wrapping */
    height: 100%;
}

.main-header-nav-list li {
    margin: 0;
    height: 100%;
    /* Removed borders to remove pipe separators */
}

.main-header-nav-list a {
    display: flex; /* Use flex to center text vertically */
    align-items: center;
    padding: 0 10px; /* Padding for menu items */
    color: var(--text-primary); /* Muted dark brown for the text */
    font-family: 'Roboto Mono', monospace; /* Monospace for menu items */
    font-size: 0.9rem; /* Smaller font for menu bar item */
    text-decoration: none;
    height: 100%; /* Fill parent li height */
    transition: background-color 0.1s linear, color 0.1s linear; /* Smooth hover */
    white-space: nowrap; /* Prevent menu items from wrapping */
}

.main-header-nav-list a:hover {
    background-color: var(--app-container-border); /* Darker background on hover */
    color: var(--header-highlight); /* White text on hover */
}

/* Theme Toggle Button Styles */
.theme-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0 8px;
    margin-left: auto; /* Pushes the button to the far right */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
    color: var(--text-primary); /* Icon color */
}

.theme-toggle:hover {
    transform: scale(1.1);
    color: var(--link-hover-color);
}

.theme-toggle svg {
    width: 16px;
    height: 16px;
    transition: opacity 0.3s ease;
}

.theme-toggle .moon-icon.hidden,
.theme-toggle .sun-icon.hidden {
    opacity: 0;
    pointer-events: none;
    position: absolute; /* Prevent layout shift */
}

/* Main Content Area */
.content-area {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1rem;
    background-color: var(--app-container-bg);
    border-radius: 0;
    border-top: 1px solid var(--app-container-highlight); /* Subtle separator from header */
    color: var(--text-primary);
    font-family: 'Inter', sans-serif; /* Sans-serif for body text */
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Individual Content Sections */
.content-section {
    padding: 1rem;
    margin-bottom: 1.5rem;
    background-color: var(--app-container-bg); /* White background */
    border: 2px solid var(--section-border); /* Muted dark brown border */
    border-right: 2px solid var(--section-highlight);
    border-bottom: 2px solid var(--section-highlight);
    border-radius: 0;
    box-shadow: 4px 4px 0px var(--shadow-color); /* Soft shadow */
    color: var(--text-primary); /* Muted dark brown text */
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.content-section h2 {
    color: var(--text-primary); /* Muted dark brown headings */
    font-size: 1.4rem;
    text-shadow: none;
    letter-spacing: normal;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
    /* Updated for centering with flanking lines */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center; /* Fallback for older browsers, though flex handles it */
    padding-bottom: 5px;
    font-family: 'Roboto Mono', monospace; /* Monospace for headings */
    font-weight: bold;
    border-bottom: none; /* Remove previous border-bottom */
    transition: color 0.3s ease, border-color 0.3s ease;
}

.content-section h2::before,
.content-section h2::after {
    content: '';
    flex-grow: 1;
    height: 18px; /* Adjusted height to accommodate 6 lines with spacing */
    background-image:
        linear-gradient(to bottom,
            var(--section-border) 0px, var(--section-border) 2px, transparent 2px, transparent 4px, /* Line 1 (bold) */
            var(--section-border) 4px, var(--section-border) 5px, transparent 5px, transparent 7px, /* Line 2 (thin) */
            var(--section-border) 7px, var(--section-border) 8px, transparent 8px, transparent 10px, /* Line 3 (thin) */
            var(--section-border) 10px, var(--section-border) 11px, transparent 11px, transparent 13px, /* Line 4 (thin) */
            var(--section-border) 13px, var(--section-border) 14px, transparent 14px, transparent 16px, /* Line 5 (thin) */
            var(--section-border) 16px, var(--section-border) 18px /* Line 6 (bold) */
        );
    background-size: 100% 18px; /* Repeat over full height */
    margin: 0 10px; /* Space between line and text */
    transition: background-color 0.3s ease;
}


.content-section h3 {
    color: var(--text-primary); /* Muted dark brown subheadings */
    font-size: 1rem;
    margin-bottom: 0.5rem;
    text-decoration: underline;
    font-weight: bold;
    transition: color 0.3s ease;
}

.content-section p, .content-section li {
    color: var(--text-primary);
    font-family: 'Inter', sans-serif; /* Sans-serif for body text */
    font-size: 0.9rem;
    line-height: 1.4;
    margin-bottom: 0.5rem;
    transition: color 0.3s ease;
}

/* Specific Section Styles (e.g., for featured listings) */
.feature-box {
    background-color: var(--app-container-bg);
    border: 1px solid var(--section-border);
    border-radius: 0;
    padding: 0.75rem;
    box-shadow: 2px 2px 0px var(--section-highlight);
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.feature-box h3 {
    color: var(--text-primary);
    text-decoration: none;
}

.feature-box a, .content-section a {
    color: var(--link-color); /* Muted terracotta link color */
    text-decoration: underline;
    transition: color 0.1s linear;
}

.feature-box a:hover, .content-section a:hover {
    color: var(--link-hover-color); /* Darker terracotta on hover */
    text-decoration: none;
}

.social-feed-placeholder {
    background-color: var(--placeholder-bg); /* Soft light brown for placeholder */
    border: 1px dashed var(--placeholder-border); /* Dashed muted dark brown border */
    border-radius: 0;
    padding: 0.75rem;
    text-align: center;
    font-style: italic;
    color: var(--placeholder-text); /* Muted gray text */
    font-size: 0.8em;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.ranking-placeholder {
    background-color: var(--placeholder-bg);
    border: 1px solid var(--placeholder-border);
    border-radius: 0;
    padding: 0.75rem;
    color: var(--text-primary);
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.ranking-placeholder ol {
    list-style: decimal;
    list-style-position: inside;
}

.ranking-placeholder li {
    margin-bottom: 0.25rem;
}

/* Listing cards */
.listing-card {
    background-color: var(--app-container-bg); /* White card background */
    border: 2px solid var(--section-border); /* Muted dark brown border */
    border-right: 2px solid var(--section-highlight);
    border-bottom: 2px solid var(--section-highlight);
    border-radius: 0;
    box-shadow: 5px 5px 0px var(--shadow-color);
    padding: 1rem;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    color: var(--text-primary);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.listing-card .artist-image {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 0;
    border: 1px solid var(--section-border);
    margin-bottom: 1rem;
    box-shadow: none;
    image-rendering: pixelated;
    transition: border-color 0.3s ease;
}

.listing-card .artist-name {
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--text-primary);
    text-shadow: none;
    margin-bottom: 0.5rem;
    text-align: center;
    text-decoration: underline;
    transition: color 0.3s ease;
}

.listing-card .artist-bio {
    font-size: 0.8rem;
    color: var(--text-primary);
    text-align: center;
    margin-bottom: 1rem;
    max-height: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.3s ease;
}

.listing-card .tags-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.3rem;
    margin-bottom: 0.8rem;
}

.listing-card .tag {
    background-color: var(--tag-bg); /* Soft light brown tag background */
    color: var(--text-primary); /* Muted dark brown tag text */
    padding: 0.15rem 0.6rem;
    border-radius: 0;
    font-size: 0.7rem;
    font-weight: normal;
    border: 1px solid var(--tag-border);
    box-shadow: 1px 1px 0px var(--tag-shadow);
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

.listing-card .contact-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.8rem;
    width: 100%;
}

.listing-card .contact-link-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1rem;
    background-color: var(--button-bg);
    color: var(--button-text);
    font-weight: bold;
    border-radius: 0;
    border: 2px solid var(--button-border-dark);
    border-right-color: var(--button-border-light);
    border-bottom-color: var(--button-border-light);
    box-shadow: 2px 2px 0px rgba(74, 64, 58, 0.2);
    text-decoration: none;
    transition: all 0.1s linear; /* Smooth animation for buttons */
    font-size: 0.85rem;
    flex-grow: 1;
    min-width: 90px;
}

.listing-card .contact-link-button:hover {
    background-color: var(--button-hover-bg); /* Slightly darker on hover */
    color: var(--button-text);
    box-shadow: 1px 1px 0px rgba(74, 64, 58, 0.2);
    transform: translateY(1px) translateX(1px);
    border-right-color: var(--scrollbar-thumb); /* Use a darker color from palette */
    border-bottom-color: var(--scrollbar-thumb);
    border-left-color: var(--button-border-dark);
    border-top-color: var(--button-border-dark);
}

.listing-card .contact-link-button:active {
    background-color: var(--button-active-bg); /* Even darker on active */
    box-shadow: inset 1px 1px 0px rgba(74, 64, 58, 0.2);
    transform: translateY(2px) translateX(2px);
    border-right-color: var(--button-border-dark);
    border-bottom-color: var(--button-border-dark);
    border-left-color: var(--button-border-light);
    border-top-color: var(--button-border-light);
}

/* Specific styling for the "Build Your Free Listing Now!" button on landing page */
#build-listing-button {
    background-image: none;
    background-color: var(--action-button-bg);
    color: var(--action-button-text);
    border: 2px solid var(--action-button-border-dark);
    border-right-color: var(--action-button-border-light);
    border-bottom-color: var(--action-button-border-light);
    box-shadow: 4px 4px 0px var(--action-button-shadow);
    display: block; /* Ensures it can be centered with margin: auto */
    margin: 0 auto 10px auto; /* Centers horizontally, adds bottom margin */
}

#build-listing-button:hover {
    background-color: var(--action-button-hover-bg); /* Slightly darker on hover */
    color: var(--action-button-text);
    box-shadow: 2px 2px 0px var(--action-button-shadow);
    transform: translateY(1px) translateX(1px);
    border-right-color: var(--action-button-border-dark);
    border-bottom-color: var(--action-button-border-dark);
    border-left-color: var(--action-button-border-dark);
    border-top-color: var(--action-button-border-dark);
}

#build-listing-button:active {
    background-color: var(--action-button-active-bg); /* Even darker on active */
    box-shadow: inset 2px 2px 0px var(--action-button-shadow);
    transform: translateY(2px) translateX(2px);
    border-right-color: var(--action-button-border-dark);
    border-bottom-color: var(--action-button-border-dark);
    border-left-color: var(--action-button-border-light);
    border-top-color: var(--action-button-border-light);
}

/* Styling for the "View Alpha Directory" button to match "Build Your Free Listing Now!" */
#alpha-directory-button {
    background-image: none;
    background-color: var(--action-button-bg);
    color: var(--action-button-text);
    border: 2px solid var(--action-button-border-dark);
    border-right-color: var(--action-button-border-light);
    border-bottom-color: var(--action-button-border-light);
    box-shadow: 4px 4px 0px var(--action-button-shadow);
    display: block; /* Ensures it can be centered with margin: auto */
    margin: 10px auto; /* Centers horizontally, adds top and bottom margin */
}

#alpha-directory-button:hover {
    background-color: var(--action-button-hover-bg);
    color: var(--action-button-text);
    box-shadow: 2px 2px 0px var(--action-button-shadow);
    transform: translateY(1px) translateX(1px);
    border-right-color: var(--action-button-border-dark);
    border-bottom-color: var(--action-button-border-dark);
    border-left-color: var(--action-button-border-dark);
    border-top-color: var(--action-button-border-dark);
}

#alpha-directory-button:active {
    background-color: var(--action-button-active-bg);
    box-shadow: inset 2px 2px 0px var(--action-button-shadow);
    transform: translateY(2px) translateX(2px);
    border-right-color: var(--action-button-border-dark);
    border-bottom-color: var(--action-button-border-dark);
    border-left-color: var(--action-button-border-light);
    border-top-color: var(--action-button-border-light);
}
/* Specific styling for the "Build Your Free Listing Now!" button on landing page */
#private-feedback-button {
    background-image: none;
    background-color: var(--action-button-bg);
    color: var(--action-button-text);
    border: 2px solid var(--action-button-border-dark);
    border-right-color: var(--action-button-border-light);
    border-bottom-color: var(--action-button-border-light);
    box-shadow: 4px 4px 0px var(--action-button-shadow);
    display: block; /* Ensures it can be centered with margin: auto */
    margin: 0 auto 10px auto; /* Centers horizontally, adds bottom margin */
}

#private-feedback-button:hover {
    background-color: var(--action-button-hover-bg); /* Slightly darker on hover */
    color: var(--action-button-text);
    box-shadow: 2px 2px 0px var(--action-button-shadow);
    transform: translateY(1px) translateX(1px);
    border-right-color: var(--action-button-border-dark);
    border-bottom-color: var(--action-button-border-dark);
    border-left-color: var(--action-button-border-dark);
    border-top-color: var(--action-button-border-dark);
}

#private-feedback-button:active {
    background-color: var(--action-button-active-bg); /* Even darker on active */
    box-shadow: inset 2px 2px 0px var(--action-button-shadow);
    transform: translateY(2px) translateX(2px);
    border-right-color: var(--action-button-border-dark);
    border-bottom-color: var(--action-button-border-dark);
    border-left-color: var(--action-button-border-light);
    border-top-color: var(--action-button-border-light);
}

/* Styling for the Theme Cycle button and Easter Egg button */
.theme-cycle-toggle {
    display: block; /* Ensures it can be centered with margin: auto */
    margin: 0 auto; /* Centers the button horizontally */
    padding: 0.6rem 1rem;
    font-weight: bold;
    border-radius: 0;
    text-decoration: none;
    font-size: 0.85rem;
    background-image: none; /* Remove any default background image */

    /* Inherit action button styles */
    background-color: var(--action-button-bg);
    color: var(--action-button-text);
    border: 2px solid var(--action-button-border-dark);
    border-right-color: var(--action-button-border-light);
    border-bottom-color: var(--action-button-border-light);
    box-shadow: 4px 4px 0px var(--action-button-shadow);
    transition: all 0.1s linear; /* Smooth transition for hover/active */
}

.theme-cycle-toggle:hover {
    background-color: var(--action-button-hover-bg);
    color: var(--action-button-text);
    box-shadow: 2px 2px 0px var(--action-button-shadow);
    transform: translateY(1px) translateX(1px);
    border-right-color: var(--action-button-border-dark);
    border-bottom-color: var(--action-button-border-dark);
    border-left-color: var(--action-button-border-dark);
    border-top-color: var(--action-button-border-dark);
}

.theme-cycle-toggle:active {
    background-color: var(--action-button-active-bg);
    box-shadow: inset 2px 2px 0px var(--action-button-shadow);
    transform: translateY(2px) translateX(2px);
    border-right-color: var(--action-button-border-dark);
    border-bottom-color: var(--action-button-border-dark);
    border-left-color: var(--action-button-border-light);
    border-top-color: var(--action-button-border-light);
}


/* Counter styling */
.visit-counter {
    font-size: 0.75rem;
    color: var(--text-primary);
    text-align: center;
    margin-top: 0.5rem;
    padding: 0.1rem 0.4rem;
    background-color: var(--tag-bg);
    border-radius: 0;
    border: 1px solid var(--tag-border);
    box-shadow: 1px 1px 0px var(--tag-shadow);
    align-self: flex-end;
    margin-top: 1rem;
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

/* Footer Styling */
.footer {
    background-color: var(--footer-bg);
    color: var(--text-primary);
    text-align: center;
    font-size: 0.7rem;
    padding: 8px;
    border-top: 1px solid var(--footer-border);
    border-radius: 0;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* The .social-links div is removed from HTML, so these styles are no longer directly applicable for the footer.
   However, similar styles for social links within listing cards will remain. */
/*
.footer .social-links a {
    color: var(--text-primary);
    margin: 0 5px;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: color 0.1s linear, transform 0.2s ease;
}

.footer .social-links a:hover {
    color: var(--link-hover-color);
    transform: scale(1.1);
}

.footer .social-links svg {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}
*/

/* Hide sections by default - controlled by JS */
.hidden {
    display: none !important;
}

/* Filter Modal Styling - resembles a system dialog box */
#filter-modal > div {
    background-color: var(--modal-bg);
    border: 2px solid var(--modal-border);
    border-right: 2px solid var(--modal-highlight);
    border-bottom: 2px solid var(--modal-highlight);
    border-radius: 0;
    box-shadow: 8px 8px 0px var(--shadow-color);
    color: var(--text-primary);
    padding: 1rem; /* Added padding for modal content */
    max-width: 90%; /* Ensure it's responsive */
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

#filter-modal h3 {
    color: var(--text-primary);
    border-bottom: 1px solid var(--modal-border);
    padding-bottom: 5px;
    margin-bottom: 10px;
    font-family: inherit;
    font-weight: bold;
    transition: color 0.3s ease, border-color 0.3s ease;
}

#filter-modal label {
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    transition: color 0.3s ease;
}

#filter-modal .tag-checkbox .tag {
    background-color: var(--bg-primary); /* Warm off-white for tags */
    color: var(--text-primary);
    border: 1px solid var(--tag-border);
    box-shadow: 1px 1px 0px var(--tag-shadow);
    font-size: 0.8rem;
    padding: 0.2rem 0.5rem;
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

/* Style for selected filter tags */
#filter-modal .tag-checkbox input:checked + .tag {
    background-color: var(--text-primary); /* Muted dark brown when checked */
    color: var(--bg-primary); /* White text on checked */
}

#filter-modal button {
    padding: 0.5rem 1rem;
    font-weight: bold;
    border-radius: 0;
    border: 2px solid var(--button-border-dark);
    border-right-color: var(--button-border-light);
    border-bottom-color: var(--button-border-light);
    box-shadow: 2px 2px 0px rgba(74, 64, 58, 0.2);
    font-size: 0.85rem;
    transition: all 0.1s linear;
}

#filter-modal #close-filter-modal {
    background-color: var(--button-bg);
    color: var(--button-text);
}
#filter-modal #close-filter-modal:hover {
    background-color: var(--button-hover-bg);
}
#filter-modal #close-filter-modal:active {
    background-color: var(--button-active-bg);
}

#filter-modal button:not(#close-filter-modal) { /* Apply filters button */
    background-color: var(--button-bg);
    color: var(--button-text);
}
#filter-modal button:not(#close-filter-modal):hover {
    background-color: var(--button-hover-bg);
}
#filter-modal button:not(#close-filter-modal):active {
    background-color: var(--button-active-bg);
}

/* Responsive adjustments for mobile-friendliness */
@media (max-width: 450px) {
    body {
        font-size: 13px;
    }
    .app-container {
        width: 100%;
        height: 100vh;
        margin: 0;
        border-radius: 0;
        border: none;
        box-shadow: none;
    }

    .header {
        border-radius: 0;
        overflow-x: auto; /* Enable horizontal scrolling for menu if too many items */
        white-space: nowrap; /* Keep links on one line */
        justify-content: flex-start; /* Ensure items start from left */
    }

    .footer {
        border-radius: 0;
    }

    .content-area {
        height: auto;
        min-height: calc(100vh - 100px);
        border-radius: 0;
    }

    .content-section {
        border-radius: 0;
        box-shadow: 2px 2px 0px var(--shadow-color); /* Smaller shadow on mobile */
    }

    /* Adjust header-nav on mobile to prevent overflow/wrap */
    .main-header-nav {
        flex-shrink: 1; /* Allow shrinking */
        overflow-x: auto; /* Enable horizontal scrolling if needed */
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    }

    .main-header-nav-list {
        display: inline-flex; /* Use inline-flex to keep items on one line, allowing scroll */
    }
}