body, html {
    overflow-x: hidden;
}

.fancy {
    --b: 4px;   /* control the border thickness */
    --w: 100vw;  /* control the width of the line*/
    --g: 4px;  /* control the gap */
    --c: #000000;
   
    width: -moz-fit-content;
    width: fit-content;
    padding: 0.1em 0.7em;
    line-height: 1.5em;
    /* border: 1px solid; */
    /* transform-style: preserve-3d; */
    /* -webkit-backface-visibility: hidden; */
    /* backface-visibility: hidden; */
    /* color: #fff; */
    /* background: 
      conic-gradient(from 45deg at left ,var(--c) 25%, #0007 0) 0%,
      conic-gradient(from -135deg at right,var(--c) 25%,#0000 0) 100%; */
    background-color: var(--c);
    border-radius: 50vh;
    /* background-size: 51% 100%;
    background-origin: border-box;
    background-repeat: no-repeat; */
    border-image: 
       linear-gradient(
         #0000      calc(50% - var(--b)/2),
         var(--c) 0 calc(50% + var(--b)/2),
         #0000    0) 
      1/0 var(--w)/calc(var(--w) + var(--g));
    margin-inline: auto;
}

.fancy-line {
    height: 4px;
    background: black;
}

.title-frame {
    width: -moz-fit-content;
    width: fit-content;
    padding: 0.3em 1em;
    border-radius: 50vh;
    background-color: #000000;
    margin-inline: auto;
}


#audio-device-selectors{
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
}

.audio-device-selector-and-title{
    max-width: 500px;
    margin: 0px auto;
}

#server-load{
    margin-top: 20px;
}

#server-load p{
    font-size: 12px;
    font-weight: bold;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top:  0px;
    padding-bottom: 0px;
    text-decoration: underline;
}

#server-load th{
    font-size: 12px;
    font-weight: bold;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top:  0px;
    padding-bottom: 0px;
    border-style : hidden!important;
}

#server-load th:first-child{
    width: 100%;
    text-align: left;
}

#server-load th:nth-child(2){
    text-align: end;
}

#server-load table{
    display: block;
    width: fit-content;
    border-spacing: 0px;
    border-collapse: collapse;
}

/* Result presentation styles have been moved to static/css/results.css */

/* Pulse Animation for Titles */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.03);
    }
}

/* Title Styles */

/* Used for voice match result headers (e.g., "TOP-5 Celebrity Voice Matches") in celeb-search.html */
#TOP5-title{
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: clamp(16px, 4vw, 30px);
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #ff66cc;
    -webkit-text-stroke: 0.075em #000000;
    text-shadow: 0 0 0.15em #ff66cc, 0 0 0.3em #ff66cc;
    display: table;
    margin: 0px auto 1em auto;
    text-align: center;
    padding: 0.3em 0.8em;
    border-radius: 50vh;
    background-color: #000000;
    border: clamp(2px, 0.5vw, 3px) solid #ff66cc;
    visibility: hidden; /* Hide during resize calculation to prevent flash */
}
  
/* Used for main page headers (e.g., "WHO DO I SOUND LIKE?", "REAL-TIME SPEAKER IDENTIFIER", etc.) */
.title{
    margin: 10px auto 0.4em auto;
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: clamp(20px, 5vw, 40px);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #00ffff;
    -webkit-text-stroke: 0.075em #000000;
    text-shadow: 0 0 0.15em #00ffff, 0 0 0.3em #00ffff;
    display: table;
    text-align: center;
    padding: 0.3em 0.8em;
    border-radius: 50vh;
    background-color: #000000;
    border: clamp(2px, 0.5vw, 3px) solid #00ffff; /* Default to cyan matching color */
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.3); /* Premium neon shadow glow */
    visibility: hidden; /* Hide during resize calculation to prevent flash */
}

/* Color-specific neon borders for titles */
.title.title-blue {
    color: #00e5ff;
    text-shadow: 0 0 0.15em #00e5ff, 0 0 0.3em #00e5ff;
    border-color: #00e5ff;
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.4);
}
.title.title-green {
    color: #00ff66;
    text-shadow: 0 0 0.15em #00ff66, 0 0 0.3em #00ff66;
    border-color: #00ff66;
    box-shadow: 0 0 15px rgba(0, 255, 102, 0.4);
}

/* Used for major animated subtitles / section cards (e.g., "VOICE TARGET", "IDENTIFY", "INPUT #1") */
.fancy-subtitle{
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: clamp(18px, 3.5vw, 30px);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #00ccff;
    -webkit-text-stroke: 0.075em #000000;
    text-shadow: 0 0 0.15em #00ccff, 0 0 0.3em #00ccff;
}

/* Section subtitles with lines extending to page edges */
.section-subtitle {
    position: relative;
    width: fit-content;
    margin: 15px auto;
    padding: 0.2em 0.8em;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: clamp(12px, 2.5vw, 22px);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #00e5ff;
    -webkit-text-stroke: 0.05em #000000;
    text-shadow: 0 0 0.1em #00e5ff, 0 0 0.2em #00e5ff;
    text-align: center;
    line-height: 1.5em;
    background-color: #000000;
    border-radius: 50vh;
    border: 2px solid #00e5ff;
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.3);
}

.section-subtitle::before,
.section-subtitle::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 2px;
    width: 100vw;
    pointer-events: none;
}

/* Left side: fades from semi-translucent cyan at page edge to bright near title */
.section-subtitle::before {
    right: calc(100% + 6px);
    background: linear-gradient(to right, rgba(0, 229, 255, 0.15) 0%, rgba(0, 229, 255, 0.25) 30%, rgba(0, 229, 255, 0.4) 60%, rgba(0, 229, 255, 0.65) 85%, #00e5ff 100%);
}

/* Right side: fades from bright near title to semi-translucent cyan at page edge */
.section-subtitle::after {
    left: calc(100% + 6px);
    background: linear-gradient(to right, #00e5ff 0%, rgba(0, 229, 255, 0.65) 15%, rgba(0, 229, 255, 0.4) 40%, rgba(0, 229, 255, 0.25) 70%, rgba(0, 229, 255, 0.15) 100%);
}

/* Used for smaller section subtitles / markers (e.g., "Celebrity Voice Search", "ANALYSIS WINDOW") */
.subsubtitle{
    margin: 10px auto;
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: clamp(14px, 4vw, 30px);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #00ff66;
    -webkit-text-stroke: 0.075em #000000;
    text-shadow: 0 0 0.15em #00ff66, 0 0 0.3em #00ff66;
    display: table;
    text-align: center;
    padding: 0.3em 0.8em;
    border-radius: 50vh;
    background-color: #000000;
    border: clamp(2px, 0.5vw, 3px) solid #00ff66; /* Default to matching neon green */
    box-shadow: 0 0 15px rgba(0, 255, 102, 0.3); /* Neon green shadow glow */
    visibility: hidden; /* Hide during resize calculation to prevent flash */
}

@keyframes recording-pulse {
    0%, 100% {
        transform: scale(1);
        text-shadow: 0 0 0.15em #ff33bb, 0 0 0.3em #ff33bb, 0 0 0.6em #ff33bb;
        box-shadow: 0 0 0.3em #ff33bb, inset 0 0 0.3em rgba(255, 51, 187, 0.15);
    }
    50% {
        transform: scale(1.1);
        text-shadow: 0 0 0.25em #ff33bb, 0 0 0.5em #ff33bb, 0 0 0.9em #ff33bb;
        box-shadow: 0 0 0.6em #ff33bb, inset 0 0 0.5em rgba(255, 51, 187, 0.25);
    }
}

/* Recording timer display - monospace font with title-like styling */
.record-animation .recording-timer{
    margin: 0 auto 12px auto;
    font-family: 'Rubik Mono One', monospace;
    font-weight: 400;
    font-size: clamp(16px, 2vw, 35px);
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ff33bb;
    -webkit-text-stroke: 0.075em #000000;
    animation: recording-pulse 0.5s ease-in-out infinite;
    display: table;
    text-align: center;
    padding: 0.3em 0.8em;
    border-radius: 50vh;
    background-color: #000000;
    border: clamp(2px, 0.5vw, 4px) solid #ff33bb;
}





  





#about-contents{
    margin-top: -40px;
    margin-left: 25px;
}




* {
    scroll-margin-top: 50px;
}

body {
    padding-top: 50px;
    padding-bottom: 40px; /* Comfortable breathing room at the bottom of the page */
    /* overflow-y:scroll; */
    background-color: #0c0d12; /* Match the dark studio slate to eliminate white area below bottom section */
}

/* Audio Controls and Visualizer styles have been moved to static/css/audio_controls.css */










.navbar-toggler,
.navbar-toggler:focus,
#logTextArea:focus,
#logTextArea {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border-style: none;
}

#logTextArea:focus,
#logTextArea {
    background: rgba(8, 9, 15, 0.85);
    color: #e0e3e7;

    margin-top: 5px;
    border: 1px solid rgba(0, 229, 255, 0.3);
    overflow: auto;
    outline: none;

    padding: 8px 12px;
    border-radius: 8px;

    font-family: 'Orbitron', monospace;
    font-size: 0.75em;
    letter-spacing: 0.5px;
    line-height: 1.5;

    resize: none;
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.1), inset 0 0 8px rgba(0, 0, 0, 0.4);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

#logTextArea:focus {
    border-color: rgba(0, 229, 255, 0.6);
    box-shadow: 0 0 16px rgba(0, 229, 255, 0.2), inset 0 0 8px rgba(0, 0, 0, 0.4);
}


#logTogglerIcon {
    background-image: url("../img/chevron-expand-outline.svg");
}

#navbarTogglerIcon {
    background-image: url("../img/menu-outline.svg");
}

.navbar {
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
    background-color: #0c0d12 !important;
    border-bottom: 2px solid rgba(0, 229, 255, 0.4);
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.15), 0 4px 16px rgba(0, 0, 0, 0.4);
}

.navbar-brand,
.navbar-brand:hover {
    color: #00e5ff;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 1.1em;
    letter-spacing: 1px;
    text-shadow: 0 0 0.2em #00e5ff;
}

.nav-link {
    color: rgba(255, 255, 255, 0.75) !important;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8em;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding-top: 0.2rem !important;
    padding-bottom: 0.2rem !important;
    transition: color 0.3s ease;
}

.nav-link:hover,
.nav-link.active {
    color: #00e5ff !important;
    text-shadow: 0 0 0.3em rgba(0, 229, 255, 0.5);
}

@media (min-width: 1042px) {
    .navbar-expand-custom {
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    .navbar-expand-custom .navbar-nav {
        flex-direction: row;
    }
    .navbar-expand-custom .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
    }
    .navbar-expand-custom .navbar-toggler {
        display: none;
    }
}

/* Center SPEECH LAB text on narrow screens while keeping logo left and toggler right */
@media (max-width: 1041.98px) {
    #top-navbar-container {
        position: relative;
    }
    #top-navbar {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        white-space: nowrap;
    }
}

/* Log panel (fixed-bottom navbar): move border to top */
.navbar.fixed-bottom {
    border-bottom: none;
    border-top: 2px solid rgba(0, 229, 255, 0.4);
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.15), 0 -4px 16px rgba(0, 0, 0, 0.4);
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}

.filter-gold {
    filter: invert(83%) sepia(38%) saturate(4071%) hue-rotate(360deg) brightness(103%) contrast(104%);
}

/* SpeechLab logo in navbar */
.speechlab-logo {
    display: inline-block;
    height: 36px;
    width: 36px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 6px;
    background: transparent !important;
    background-color: transparent !important;
}

/* Hero logo above page titles */
.hero-logo {
    display: block;
    margin: 0 auto clamp(10px, 2vw, 20px) auto;
    height: clamp(140px, 24vw, 240px);
    width: auto;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: contain;
    background: transparent !important;
    background-color: transparent !important;
}

/* Mode / dataset button switcher (shared across pages) */
.mode-switcher {
    display: inline-flex;
    border: 2px solid rgba(0, 229, 255, 0.35);
    border-radius: 50vh;
    overflow: hidden;
    background-color: rgba(8, 9, 15, 0.85);
}

.mode-btn {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(10px, 1.3vw, 13px);
    padding: 0.5em 1.2em;
    color: #e0e3e7;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    white-space: nowrap;
}

.mode-btn:not(:last-child) {
    border-right: 1px solid rgba(0, 229, 255, 0.2);
}

.mode-btn.active {
    color: #000000;
    background: #00e5ff;
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.4);
}

.mode-btn:hover:not(.active) {
    color: #00e5ff;
    background: rgba(0, 229, 255, 0.1);
}