blockquote {
    margin: 0;
    padding: 10px 12px;
    border-left: 3px solid #5b9cff;
    background: #122732;
    font-size: 18px;
}

.teams-page h1 {
    margin-bottom: 20px;
}

.teams-page .card {
    background: rgba(16, 24, 40, 0.6);
    border: 1px solid rgba(106, 252, 255, 0.2);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
}

.teams-page .card.warning {
    border-color: rgba(255, 99, 132, 0.4);
    background: rgba(255, 99, 132, 0.08);
}

.teams-page .card.invite-card {
    border-color: rgba(106, 252, 255, 0.5);
    background: rgba(106, 252, 255, 0.05);
    text-align: center;
}

.teams-page label {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 6px;
    color: #c1d1ff;
}

.teams-page input[type="text"] {
    width: 100%;
    margin-bottom: 12px;
    padding: 10px;
    background: rgba(5, 11, 25, 0.8);
    border: 1px solid rgba(106, 252, 255, 0.2);
    border-radius: 6px;
    color: #f0f4ff;
}

.team-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.invite-link-wrap {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    margin-top: 15px;
}

.invite-link-row {
    display: flex;
    gap: 10px;
}

.invite-link-row input {
    flex: 1;
    margin: 0;
}

.team-member-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.team-member-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.team-member-list li:last-child {
    border-bottom: 0;
}

.creation-meta {
    font-size: 0.85rem;
    color: #88aacc;
    margin: 4px 0 8px;
    display: flex;
    justify-content: space-between;
}

.role-badge {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(106, 252, 255, 0.15);
    color: #6afcff;
    margin-left: 10px;
}

.team-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background: rgba(16, 24, 40, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 12px 18px;
    border-radius: 6px;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 9999;
}

.team-toast.visible {
    opacity: 1;
    transform: translateY(0);
}

.team-toast.success {
    border-color: rgba(106, 252, 255, 0.4);
}

.team-toast.error {
    border-color: rgba(255, 99, 132, 0.5);
}

.character-output-card {
    background: rgba(72, 101, 139, 0.18);
    border: 1px solid rgba(106, 252, 255, 0.25);
    border-radius: 12px;
    padding: 20px;
    margin-top: 15px;
    line-height: 1.65;
}

.character-output-card h3 {
    margin-top: 1.2em;
    color: #6afcff;
    font-size: 1.2em;
}

.character-output-card h3:first-of-type {
    margin-top: 0;
}

/* .character-output-card ul {
    margin: 0 0 1em 1.3em;
} */

.character-output-card strong {
    color: #a5f5ff;
}

.character-output-card p {
    margin-bottom: 1em;
}

.character-voice-card {
    float: left;
    margin-bottom: 20px;
    padding: 20px;
    background: rgba(72, 101, 139, 0.1);
    border: 1px solid rgba(106, 252, 255, 0.15);
    border-radius: 10px;
}

@font-face {
    font-family: 'Open Sans Light';
    src: url('../fonts/OpenSans-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans Medium';
    src: url('../fonts/OpenSans-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    padding: 0;
    margin: 0;
    scroll-behavior: smooth;
    cursor: default;
    font-size: 16.5px;
    line-height: 1.5;
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, Segoe UI,
        Noto Sans, Helvetica, Arial, sans-serif;
    text-align: center;
    background-color: #000000;
    color: #98c3ff;
}

.generor-logo {
    margin: 0 auto 25px;
}

.logo-wrap {
    float: left;
    width: 100%;
    margin: 30px 0 15px;
    text-align: center;
}

.logo-inner-wrap {
    display: inline-block;
    width: 86px;
    height: 86px;
    margin: auto;
}

.logo-bg {
    float: left;
    width: 100%;
    height: 100%;
    border-radius: 11px;
    box-shadow: 1px 1px 0px inset #a5a5a5;
    background: linear-gradient(-45deg, #525252, #8e8e8e);
    position: relative;
    margin: 0 auto;
    border: 0.5px solid #111;
}

#logo {
    display: inline-block;
}

.loaded #logo:hover {
    transition-delay: 0s;
}

.loaded a#logo {
    transition: all 0.15s linear;
    transition-delay: 1.4s;
}

.loaded #logo:hover {
    scale: 0.95;
}

.logo-bg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(-45deg, #2f9620, #1db333);
    border-radius: 5px;
    margin: -21px;
    z-index: -2;
    border: 1px solid #27b927;
}

.logo-bg::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, #2c2c2c, #4a4a4a);
    border-radius: 12px;
    margin: -2px;
    z-index: -1;
}

.logo-text-wrap {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.logo-text-main {
    color: #f0f0f0;
    font-size: 20px;
    text-shadow: 1px 1px 0 black;
}

.logo-text-sub {
    color: #d8d8d8;
    text-shadow: 1px 1px 0 black;
    font-size: 11px;
    line-height: 25px;
}

.logo-bg .hole {
    position: absolute;
    border-radius: 100%;
    background-color: #0b1521;
    border: 0.5px solid #0b6416;
    box-shadow: 1px 1px 0px inset #179014;
    width: 15px;
    height: 15px;
    pointer-events: none;
}

.logo-bg .hole.one {
    left: -17%;
    top: -17%;
}

.logo-bg .hole.two {
    right: -17%;
    top: -17%;
}

.logo-bg .hole.three {
    left: -17%;
    bottom: -17%;
}

.logo-bg .hole.four {
    right: -17%;
    bottom: -17%;
}

.loaded #logo .screw {
    transition: all 0.5s linear;
}

.loaded #logo .screw.one {
    transition-delay: 0.3s;
}

.loaded #logo .screw.two {
    transition-delay: 0.4s;
}

.loaded #logo .screw.three {
    transition-delay: 0.5s;
}

.loaded #logo .screw.four {
    transition-delay: 0.6s;
}

.loaded #logo:hover .screw.one {
    transition-delay: 0.3s;
}

.loaded #logo:hover .screw.two {
    transition-delay: 0.4s;
}

.loaded #logo:hover .screw.three {
    transition-delay: 0.5s;
}

.loaded #logo:hover .screw.four {
    transition-delay: 0.6s;
}

#logo .screw {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    border-radius: 100%;
    background-color: #a7a7a7;
    border: 1px solid #a9a9a9;
}

#logo .screw::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: 1.5px;
    background-color: #777;
    margin: auto;
    height: 75%;
    border-radius: 5px;
}

#logo .screw::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: 0.5px;
    background-color: #333;
    margin: auto;
    height: 60%;
}

#logo .screw {
    visibility: hidden;
    scale: 1.1;
}

.loaded #logo:hover .screw {
    visibility: visible;
    scale: 1;
}

#logo:hover .screw {
    visibility: visible;
    scale: 1;
    rotate: 335deg;
}

#logo:hover .screw.two {
    visibility: visible;
    scale: 1;
    rotate: 287deg;
}

#logo:hover .screw.three {
    visibility: visible;
    scale: 1;
    rotate: 235deg;
}

#logo:hover .screw.four {
    visibility: visible;
    scale: 1;
    rotate: 356deg;
}

::selection {
    text-shadow: none;
    background-color: #8ec4ff;
    color: #0b1521;
}

input::selection {
    text-shadow: none;
    background-color: #8ec4ff;
    color: #0b1521;
}

input::-moz-selection {
    text-shadow: none;
    background-color: #8ec4ff;
    color: #0b1521;
}

input::-webkit-selection {
    text-shadow: none;
    background-color: #8ec4ff;
    color: #0b1521;
}

#site-wrap {
    width: 100%;
    max-width: 100%;
    padding: 6px;
    text-align: left;
    box-sizing: border-box;
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

#page-wrap,
footer {
    box-sizing: border-box;
    width: 100%;
    /* padding: 0 25px 15px; */
}

footer .footer-disclaimer {
    font-size: 14px;
    opacity: 0.8;
    width: 1024px;
    max-width: 100%;
    margin: 0 auto;
}

#page-wrap,
.generator-wrap,
.story-series-container,
#wide-wrap {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 650px;
    max-width: 98%;
    max-width: 100%;
    margin: 0 auto 25px;
    text-align: center;
}

#wide-wrap,
#footer-generator-list {
    width: 912px;
    width: 1218px;
    width: 1618px;
}

.site-name-span,
caption,
h1,
h2,
h3,
h4,
.sub-tier-header,
.sidebar .logo-dot-com,
.modal-x-btn,
#logo {
    color: #f0f0f0;
    font-weight: 400;
}

h1,
h1#entry-title,
.sidebar .logo-text,
.sidebar .logo-dot-com {
    color: #f0f0f0;
}

h1 {
    font-size: 24px;
    margin: 15px 0 5px;
    margin: 15px 0;
}

h2 {
    font-size: 26px;
}

h3 {
    font-size: 24px;
}

.before-title {
    margin: 15px 0;
}

h1#entry-title {
    font-size: 13px;
    width: fit-content;
    z-index: 110;
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
    column-gap: 5px;
    align-items: center;
    justify-content: start;
    row-gap: 10px;
    transition: top 0.25s linear;
}

.floater,
.chart-wrap-background {
    border: 1px solid #223552;
    /* background-color: #0b1521; */
}

.medium-font {
    font-size: 15px;
}

.dim {
    color: #7ca5d8;
}

#site-content {
    float: left;
    width: 100%;
}

.frontpage .list,
.creations-grid {
    position: relative;
    width: 100%;
    border: none;
    box-sizing: border-box;
    overflow: visible;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 6px;
}

.generator-browse .creations-grid {
    margin-top: 10px;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}

.frontpage .list .item:hover,
.footer-generator-list-items .item:hover,
.sub-tier:hover,
.creation-type-card:hover {
    transition: all 0.2s ease;
}

.frontpage .list .item:hover,
.footer-generator-list-items .item:hover,
.sub-tier:hover,
.creation-type-card:hover {
    transform: translateY(-2px);
}

.frontpage .list .item a:hover,
.footer-generator-list-items .item a:hover,
#generator-filter-trigger:hover,
.creation-type-card:hover {
    background-color: #182840;
}

#account-wrap,
#affiliate-campaign-form {
    text-align: center;
    width: 550px;
    margin: 0 0 25px;
}

#account-wrap h2 {
    margin-top: 35px;
}

#account-wrap button {
    margin: 25px 0;
}

#account-wrap label.checkbox,
#affiliate-register-form label.checkbox {
    margin: 0 auto 15px;
    float: none;
    width: 300px;
}

#account-wrap .privacy-note {
    font-size: 0.9em;
    max-width: 450px;
    margin: 10px auto 0;
    line-height: 1.5;
}

.form-section {
    float: left;
    width: 100%;
    margin-bottom: 25px;
}

.list .item,
.event-item {
    padding: 10px;
}

.event-list {
    float: left;
    width: 100%;
}

.body-full-screen-chart {
    overflow: hidden;
}

.output-item-footer.one-btn {
    justify-content: center;
    margin-top: 0;
}

h1#entry-title span {
    font-size: 18px;
    position: relative;
    white-space: nowrap;
}

h1#entry-title>span {
    padding: 3px 12px;
    line-height: 29px;
    display: flex;
    align-items: center;
    column-gap: 10px;
}

#site-content h1#entry-title>span {
    border-color: #48658b;
}

h1#entry-title>span:first-of-type {
    border-color: #fad373;
}

.checked-symbol.one,
.compare-item:first-of-type::after,
h1#entry-title>span:first-of-type::after {
    background-color: #fad373;
}

.compare-item:first-of-type,
h1#entry-title>span:first-of-type {
    color: #fad373;
}

h1#entry-title>span:nth-of-type(2) {
    border-color: #6afcff;
}

.checked-symbol.two,
.compare-item:nth-of-type(2)::after,
h1#entry-title>span:nth-of-type(2)::after {
    background-color: #6afcff;
}

.compare-item:nth-of-type(2),
h1#entry-title>span:nth-of-type(2) {
    color: #6afcff;
}

h1#entry-title>span:nth-of-type(3) {
    border-color: #c2b8ff;
}

.checked-symbol.three,
.compare-item:nth-of-type(3)::after,
h1#entry-title>span:nth-of-type(3)::after {
    background-color: #c2b8ff;
}

.compare-item:nth-of-type(3),
h1#entry-title>span:nth-of-type(3) {
    color: #c2b8ff;
}

h1#entry-title>span:nth-of-type(4) {
    border-color: #f69e6a;
}

.checked-symbol.four,
.compare-item:nth-of-type(4)::after,
h1#entry-title>span:nth-of-type(4)::after {
    background-color: #f69e6a;
}

.compare-item:nth-of-type(4),
h1#entry-title>span:nth-of-type(4) {
    color: #f69e6a;
}

h1#entry-title>span:nth-of-type(5) {
    border-color: #f685f0;
}

.checked-symbol.five,
.compare-item:nth-of-type(5)::after,
h1#entry-title>span:nth-of-type(5)::after {
    background-color: #f685f0;
}

.compare-item:nth-of-type(5),
h1#entry-title>span:nth-of-type(5) {
    color: #f685f0;
}

.compare-item:hover {
    color: #f84949;
}

h2 span {
    float: right;
    font-size: 14px;
    font-style: italic;
}

h3.sub-header {
    margin: -20px 0 20px;
    grid-column: 1/4;
}

h3.sub-header::before {
    content: "\2013\00A0";
}

h3.sub-header::after {
    content: "\00A0\2013";
}

.entry-details h2,
h3.sub-header {
    font-size: 15px;
    font-weight: 400;
}

.entry-details h2 {
    float: left;
    width: 100%;
    margin: 15px 0;
}

.chart-wrap h3 {
    font-size: 15px;
}

a,
#site-content a.item {
    color: #98c3ff;
    /* text-decoration: none; */
}

.loaded a,
.sub-tier {
    transition: all 0.25s ease-in;
    transition: all 0.15s ease-in;
}

a:hover,
#site-content a.item:hover {
    color: #f0f0f0;
    text-decoration: none;
}

#site-content a,
#cookie-banner a {
    text-decoration: underline;
}

#site-content a:hover,
#cookie-banner a:hover {
    text-decoration: none;
}

#site-header {
    float: left;
    width: 100%;
    text-align: center;
    padding: 11px;
    background: #0b1521;
    margin: 0 0 15px;
    box-sizing: border-box;
}

.dashboard #site-header {
    display: none;
}

/* #site-content {
    display: grid;
    grid-template-columns: 32% 32% 32%;
    grid-column-gap: 2%;
    grid-auto-flow: dense; 
  } */
.full-width {
    float: left;
    width: 100%;
    margin-bottom: 40px;
}

.full-width-wrap {
    float: left;
    width: 100%;
}

.generator-wrap {
    /* padding: 0 20px; */
    /* box-sizing: border-box; */
    /* background-color: #0b1521; */
}

.generator-wrap .padding-bottom {
    padding-bottom: 15px;
}

.generator-wrap h1 {
    font-size: 31px;
    color: #6afcff;
    font-family: "Open Sans Medium", sans-serif;
}

.generator-wrap .sub-title {
    font-size: 16px;
    color: #f0f0f0;
    width: 100%;
    float: left;
}

.generator-wrap .generator-desc {
    margin: 0 0 25px;
}

.output-error {
    color: red;
    margin: 15px 0;
}

.output-item .output-error {
    margin: 25px 0 15px;
}

.notice {
    margin-bottom: 0;
}

.notice .notice-inner {
    font-size: 14px;
    color: #f0f0f0;
}

#hide-desc-btn {
    background: transparent;
    padding: 0;
    color: inherit;
    text-decoration: underline;
}

#hide-desc-btn:hover {
    text-decoration: none;
    color: #f0f0f0;
}

.generator-wrap h2 {
    margin: 0;
}

.generator-output {
    float: left;
    width: 100%;
    margin: 10px 0 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.generator-creations .generator-output {
    margin: 0;
    flex-direction: initial;
}

.audio-container {
    margin: 15px 0;
    float: left;
    width: 100%;
    border-radius: 4px;
    padding: 10px;
    box-sizing: border-box;
}

.audio-footer {
    float: left;
    width: 100%;
    margin-top: 15px;
}

.user-input-wrap {
    width: 500px;
    width: 450px;
    max-width: 100%;
    margin: 25px auto 35px;
    padding: 15px 20px;
    box-sizing: border-box;
    overflow: hidden;
}

strong {
    color: #f0f0f0;
    font-weight: normal;
}

.single-creation .user-input-wrap {
    margin: 25px auto 0;
}

.single-creation p {
    float: left;
    width: 100%;
}

/* .user-input-wrap label {
    color: #f0f0f0;
} */

.user-input-wrap input,
.user-input-wrap select {
    width: 100%;
}

.section {
    margin: 35px 0 15px;
}

::placeholder {
    color: #759ccb;
}

.generator-browse .generator-action-links {
    display: none;
}

.story-full-series .settings-wrap,
.generator-single .settings-wrap,
.social .settings-wrap,
.roast .settings-wrap,
.translation .settings-wrap,
.speech .settings-wrap,
.emoji .settings-wrap,
.summary .settings-wrap,
.blogpost .settings-wrap,
.story .settings-wrap,
.domainname .settings-wrap,
.brandname .settings-wrap,
.podcast .settings-wrap,
.music .settings-wrap,
.soundeffect .settings-wrap,
.voice .settings-wrap,
.quiz .settings-wrap,
.variation-box-wrap .settings-wrap,
.reply .settings-wrap {
    padding-bottom: 10px;
}

.reply .settings-wrap {
    overflow: visible;
}

.domainname-card {
    background: rgba(72, 101, 139, 0.15);
    border: 1px solid #223552;
    border-radius: 8px;
    padding: 20px;
    margin: 10px 0;
}

.domainname-heading {
    font-size: 1.2em;
    margin: 0 0 10px 0;
    color: #88aacc;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 5px;
}

.domainname-status {
    margin: 10px 0;
    color: #88aacc;
    font-size: 0.95em;
}

.domain-status-available {
    color: #6afcff;
}

.domain-status-taken {
    color: #ff6a6a;
}

.domain-status-unknown {
    color: #ffaa00;
}

.domainname-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 15px;
    justify-content: space-between;
}

.domain-status {
    display: inline-block;
    padding: 5px 12px;
    background: #dc3545;
    color: #f0f0f0;
    border-radius: 6px;
    font-size: 18px;
}

.domain-status.available {
    background: #28a745;
}

.step-two-wrap {
    display: none;
}

button,
a.button {
    height: 36px;
    color: black;
}

.generator-action-links button {
    color: #98c3ff;
    transition: all 0.2s ease;
}

.generator-action-links button:hover {
    color: #f0f0f0;
    transition: all 0.2s ease;
}

input,
select,
textarea,
.contenteditable,
input#prompt,
div#prompt,
.oomph-bar-bg,
.floater,
.settings-wrap,
.user-input-wrap,
/* .generator-description, */
#generator-filter-trigger,
#footer-generator-filter-trigger,
#filter-count,
#footer-filter-count,
#generator-filter,
.privacy-picker-panel,
.model-item,
.gen-nav-btn,
#cookie-banner,
.header-wrap,
.list .item,
.privacy-badge,
.view-creation-btn,
.modal,
.modal-x-btn::after,
.modal-x-btn::before,
.checkbox .checkmark,
footer,
.similar-generators-links a,
.generator-action-links .action-link-btn,
.generator-action-links a,
.generator-action-links .default-btn,
.generator-action-links .button,
.generator-action-links button,
a.action-link-btn,
.output-item,
.generator-ad-content,
.generator-action-links button.link-btn,

/* .generator-tip, */
::-webkit-scrollbar-thumb {
    border-radius: 6px;
    border: 1px solid #294264;
    background: #0c1828;
    background-color: #0c1828;
}

.oomph-bar-bg,
.floater,
.settings-wrap,
.user-input-wrap,
/* .generator-description, */
#generator-filter-trigger,
#footer-generator-filter-trigger,
#filter-count,
#footer-filter-count,
#generator-filter,
.privacy-picker-panel,
.model-item,
#cookie-banner,
.header-wrap,
.list .item,
.modal,
.modal-x-btn::after,
.modal-x-btn::before,
footer,
/* a.action-link-btn, */
.output-item,
.generator-ad-content,
/* .generator-tip, */
::-webkit-scrollbar-thumb {
    border: 1px solid #1b2e49;
}

/* When mousexit */
.loaded button,
.loaded a.choose-sub,
.loaded a.button {
    transition: transform 0.15s linear, box-shadow 0.125s linear;
}

/* When mouseenter */
.loaded button:hover,
.loaded button:active,
.loaded button:focus,
.loaded button.generating,
.loaded a.choose-sub:hover,
.loaded a.choose-sub:active,
.loaded a.choose-sub:focus,
.loaded a.choose-sub.generating,
.loaded a.button:hover,
.loaded a.button:active,
.loaded a.button:focus {
    transition: transform 0.15s linear, box-shadow 0.3s linear;
}

button.default-btn,
a.button {
    background: linear-gradient(274deg, #f0f0f0, #fff);
    box-shadow: 1px 1px 2px #f0f0f0 inset, 1px 1px #8e8e8e, 2px 2px #b5b5b5, 3px 3px #b5b5b5;
}

button.default-btn:hover,
button.default-btn:active,
a.button:hover,
a.button:active {
    box-shadow: 1px 1px 2px #f0f0f0 inset, 1px 1px #8e8e8e, 2px 2px #b5b5b5;
    transform: translateY(2px) translateX(2px);
}

a.button {
    display: block;
    color: black;
    text-decoration: none;
    box-sizing: border-box;
}

.one h2,
.one input,
.one select,
.one textarea {
    /* color: #fad373; */
}

.one input:focus,
.one select:focus,
.one textarea:focus {
    /* border-color: #fad373; */
    outline: none;
}

/* .one button, */
.generate-btn,
.choose-sub,
button.info-clicker,
button.model-info-btn,
#accept-all-cookies-btn,
#affiliate-register {
    position: relative;
    overflow: hidden;
    background: linear-gradient(274deg, #ffce54, #faeb73);
    box-shadow: 1px 1px 2px #f0f0f0 inset, 1px 1px #b29100, 2px 2px #c09c00, 3px 3px #c09c00;
}

/* .one button:hover,
.one button:active,
.one button.generating,
.one button.disabled, */
.generate-btn:hover,
.generate-btn:active,
.generate-btn.generating,
.generate-btn.disabled,
.choose-sub:hover,
.choose-sub:active,
button.info-clicker:hover,
button.info-clicker:active,
button.model-info-btn:hover,
button.model-info-btn:active,
#affiliate-register:hover,
#affiliate-register:active {
    box-shadow: 1px 1px 2px #f0f0f0 inset, 1px 1px #b29100, 2px 2px #c09c00;
    transform: translateY(2px) translateX(2px);
}

.two h2,
.two input,
.two textarea {
    color: #6afcff;
}

.two input:focus,
.two textarea:focus {
    border-color: #6afcff;
}

.two button,
.modal #register-btn,
#register-toggle-btn,
#affiliate-dashboard {
    background: linear-gradient(274deg, #32ebef, #67fcff);
    box-shadow: 1px 1px 2px #a4fdff inset, 1px 1px #008183, 2px 2px #09afb2, 3px 3px #09afb2;
}

.two button:hover,
.two button:active,
.two button.generating,
.two button.disabled,
.modal #register-btn:hover,
.modal #register-btn:active,
.modal #register-btn.disabled,
#register-toggle-btn:hover,
#register-toggle-btn:active,
#affiliate-dashboard:hover,
#affiliate-dashboard:active {
    box-shadow: 1px 1px 2px #a4fdff inset, 1px 1px #008183, 2px 2px #09afb2;
    transform: translateY(2px) translateX(2px);
}

.three h2,
.three input,
.three textarea {
    color: #c2b8ff;
}

.three input:focus,
.three textarea:focus {
    border-color: #c2b8ff;
}

.three button {
    background: linear-gradient(274deg, #b08cff, #d0bbff);
    box-shadow: 1px 1px 2px #e4b2ff inset, 1px 1px #7e3bd2, 2px 2px #8966b5, 3px 3px #8966b5;
    background: linear-gradient(274deg, #f685f0, #ffbcfb);
    box-shadow: 1px 1px 2px #ffc4fc inset, 1px 1px #b54daf, 2px 2px #d76ed1, 3px 3px #d76ed1;
}

.three button:hover,
.three button:active,
.three button.generating,
.three button.disabled {
    box-shadow: 1px 1px 2px #e4b2ff inset, 1px 1px #7e3bd2, 2px 2px #8966b5;
    transform: translateY(2px) translateX(2px);
    box-shadow: 1px 1px 2px #ffc4fc inset, 1px 1px #b54daf, 2px 2px #d76ed1;
    transform: translateY(2px) translateX(2px);
}

.four h2,
.four input,
.four textarea {
    color: #f69e6a;
}

.four input:focus,
.four textarea:focus {
    border-color: #f69e6a;
}

.four button,
.modal .default-btn#reset-toggle-btn,
.modal button.default-btn#reset-btn,
.modal button.default-btn#save-pass-btn {
    background: linear-gradient(274deg, #f69e6a, #ffcbac);
    box-shadow: 1px 1px 2px #ffdac5 inset, 1px 1px #c07a50, 2px 2px #d59169, 3px 3px #d59169;
    margin-bottom: 0;
}

.four button:hover,
.four button:active,
.four button.generating,
.four button.disabled,
.modal .default-btn#reset-toggle-btn:hover,
.modal button.default-btn#reset-btn:hover,
.modal .default-btn#reset-toggle-btn:active,
.modal button.default-btn#reset-btn:active,
.modal button.default-btn#save-pass-btn:hover,
.modal button.default-btn#save-pass-btn:active {
    box-shadow: 1px 1px 2px #ffdac5 inset, 1px 1px #c07a50, 2px 2px #d59169;
    transform: translateY(2px) translateX(2px);
}

.five h2,
.five input,
.five textarea {
    color: #f685f0;
}

.five input:focus,
.five textarea:focus {
    border-color: #f685f0;
}

.five button,
.modal .default-btn#login-btn,
.modal .default-btn.toggle-login-btn {
    background: linear-gradient(274deg, #f685f0, #ffbcfb);
    box-shadow: 1px 1px 2px #ffc4fc inset, 1px 1px #b54daf, 2px 2px #d76ed1, 3px 3px #d76ed1;
}

.five button:hover,
.five button:active,
.five button.generating,
.five button.disabled,
.modal .default-btn#login-btn:hover,
.modal .default-btn#login-btn:active,
.modal .default-btn.toggle-login-btn:hover,
.modal .default-btn.toggle-login-btn:active {
    box-shadow: 1px 1px 2px #ffc4fc inset, 1px 1px #b54daf, 2px 2px #d76ed1;
    transform: translateY(2px) translateX(2px);
}

.user-input-wrap input:focus,
.user-input-wrap select:focus,
.user-input-wrap textarea:focus {
    border: 1px solid #294264;
}

.user-input-wrap label {
    font-family: "Open Sans Medium";
    font-size: 18px;
}

.user-input-wrap input {
    text-align: left;
}

/* Affiliate */

#affiliate-register,
#affiliate-dashboard {
    float: left;
    margin: 25px 15px;
}

#affiliate-register-form {
    float: left;
    width: 550px;
    max-width: 100%;
}

#affiliate-register-form select {
    white-space: nowrap;
    max-width: 100%;
    text-overflow: ellipsis;
}

.affiliate-register-bottom {
    float: left;
    width: 100%;
    margin: 5px 0;
    text-align: center;
}

.affiliate-stats-table {
    float: left;
    width: 100%;
    margin: 15px 0;
    border-collapse: collapse;
}

.affiliate-stats-table th,
.affiliate-stats-table td {
    padding: 10px;
    border: 1px solid #223552;
}

.affiliate #page-wrap {}

.chart {
    float: left;
    width: 100%;
    height: calc(100% - 40px);
    position: relative;
}

.expand-chart-btn {
    cursor: pointer;
}

.chart-full-width {
    width: 100%;
}

.chart-wrap.chart-full-screen,
.rec .chart-wrap.chart-full-screen {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    box-sizing: border-box;
    padding: 5px;
    z-index: 101;
    background-color: #0b1521;
}

.rec .chart-header-wrap {
    display: none;
}

.chart-full-screen canvas {
    margin: auto;
    width: 100% !important;
    height: 100% !important;
}

canvas {
    max-width: 100%;
}

form input.date-input {
    width: 150px;
    color-scheme: dark;
    text-shadow: none;
    font-family: inherit;
}

input.date-input {
    border: none;
    max-width: 100%;
    box-sizing: border-box;
    padding: 6px 10px;
    cursor: pointer;
    background-color: #48658b;
    font-size: inherit;
    border: 1px solid #223552;
}

input,
select,
textarea {
    color: #f0f0f0;
    padding: 5px 15px;
    text-align: left;
}

input,
select,
textarea,
.contenteditable,
input#prompt,
div#prompt,
.oomph-bar-bg,
.privacy-badge,
.view-creation-btn,
.similar-generators-links a,
.generator-action-links .action-link-btn,
.generator-action-links a,
.generator-action-links .default-btn,
.generator-action-links .button,
.generator-action-links button,
a.action-link-btn,
.checkbox .checkmark {
    background-color: #132232;
    box-shadow: 2px 2px 2px black, 0 0 3px #000;
    transition: all 0.2s ease;
}

input:hover,
select:hover,
textarea:hover,
.contenteditable:hover,
input#prompt:hover,
div#prompt:hover,
label.checkbox:hover .checkmark {
    transform: scale(1.02);
    transform: translate(0, -1px);
    transition: all 0.2s ease;
}


input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: #f0f0f0;
    border-color: #6afcff;
}

select {
    height: 36px;
    cursor: pointer;
}

textarea {
    float: left;
    width: 100%;
    padding: 10px;
    height: 250px;
    border: 1px solid #223552;
    line-height: 1.5;
}

textarea.expandable-textarea,
textarea.medium-height {
    height: 100px;
}

textarea.expandable-textarea:focus {
    height: 250px;
}

#support-btn {
    position: fixed;
    right: 15px;
    bottom: 15px;
    border-radius: 100%;
}

#datepicker-form label {
    position: absolute;
    margin: -29px 0 0;
    left: 0;
}

.loading-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    margin: -25px 0 0 -25px;
    /* Center the spinner */
    border: 5px solid rgb(18 34 54);
    border-top: 5px solid #b7abff;
    border-radius: 50%;
    /* Make it circular */
    animation: spin 1s linear infinite;
    /* Infinite spinning animation */
    z-index: 10;
    /* Ensure it appears above the chart */
}

/* Spinner animation */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.save-chart-btn {
    width: 38px;
    height: auto;
}

.save-chart-btn svg path {
    fill: #f0f0f0;
}

.visible {
    display: block;
}

.home #site-content {
    display: block;
    grid-template-columns: unset;
    grid-column-gap: unset;
    grid-auto-flow: unset;
}

.disclaimer-notice {
    grid-column: 1/4;
    margin: 15px 0 -15px;
    text-align: center;
}

label {
    cursor: pointer;
}

label[for="info-consent"].checkbox.focus .checkmark,
label[for="marketing-consent"].checkbox.focus .checkmark {
    border: 1px solid #6afcff;
}

.switch-wrap input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.slider,
.slider::before {
    position: absolute;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

.slider::before {
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 2px;
    background-color: #f0f0f0;
    box-shadow: 2px 2px 0px #284261;
    border-radius: 20px;
}

input:checked+.slider::before {
    -webkit-transform: translateX(14px);
    -ms-transform: translateX(14px);
    transform: translateX(14px);
}

/* Cookie Banner */
#cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    bottom: 15px;
    margin: auto;
    padding: 0 20px;
    width: 600px;
    max-width: calc(100% - 30px);
    text-align: center;
    box-shadow: 2px 2px 0px #0f1b2a;
    font-size: 15px;
    box-sizing: border-box;
    z-index: 150;
}

#accept-all-cookies-btn,
#accept-functional-cookies-btn,
#decline-all-cookies-btn,
#decline-functional-cookies-btn {
    border: none;
    padding: 9px 15px;
    font-size: 15px;
    line-height: 16px;
    margin: 0 10px 20px;
    cursor: pointer;
    background-color: #f0f0f0;
}

#accept-all-cookies-btn,
#accept-functional-cookies-btn {
    background-color: #6afcff;
}

#functional-cookie-modal {
    visibility: hidden;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    padding: 5px 20px;
    background: #0b1521;
    width: 300px;
    max-width: 60%;
    text-align: center;
    height: fit-content;
}

#functional-cookie-modal.visible {
    visibility: visible;
}

.list {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.list .item {
    display: flex;
    justify-content: space-between;
    padding: 0;
    align-items: center;
    font-size: 15px;
    line-height: 18px;
    box-sizing: border-box;
    text-align: left;
    cursor: pointer;
    align-items: center;

    /* background-color: #132232; */
}

.list .item a {
    float: left;
    width: 100%;
    font-size: 17px;
    color: #6afcff;
    text-decoration: none;
    padding: 15px;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    font-family: "Open Sans Medium", sans-serif;
}

.sidebar .list .item a {
    padding: 5px 15px;
}

.list .item .desc {
    font-family: 'Roboto Light', sans-serif;
    color: #f0f0f0;
    clear: left;
    float: left;
    margin-top: 10px;
    font-size: 15px;
    width: 100%;
}

.left {
    float: left;
}

.right {
    float: right;
}

#hover-desc {
    position: fixed;
    right: 15px;
    bottom: 15px;
    opacity: 0;
    padding: 2px 8px;
    box-sizing: border-box;
    max-width: calc(100vw - 30px);
    z-index: 1000;
    background-color: #0b1521;
    color: #f0f0f0;
    border-radius: 4px;
    animation: fadeIn 0.25s linear forwards;
}

.review-box {
    float: left;
    width: 100%;
    margin: 10px 0 20px;
}

.review-star {
    background: transparent !important;
    background-color: transparent !important;
    height: 26px;
    width: 26px;
    padding: 1px;
    border-radius: 100%;
    box-shadow: none !important;
}

.review-star.toggled svg path,
.review-star.rated svg path {
    fill: #fff100;
    stroke: #fff100;
}

.review-stars {
    display: flex;
    flex-direction: column;
}

.review-stars button {
    transition: none;
    background: none;
    box-shadow: none;
}

.review-stars button:hover,
.review-stars button:active,
.review-stars button.toggled {
    box-shadow: none;
    transform: none;
}

.output-item-footer {
    float: left;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px 0 10px;
}

.output-item-footer div {
    position: relative;
}

.output-item-rate-share {
    display: flex;
    margin: 15px 0 0;
    align-items: center;
    /* align-items: start; */
    justify-content: space-between;
    gap: 15px;
    width: 100%;
}

.creations-list .output-item-rate-share {
    margin: 0;
}

/* Mode toggle buttons for variation/continuation */
.mode-toggle-btn {
    padding: 4px 10px;
    background: rgba(30, 50, 80, 0.5);
    border: 1px solid rgba(136, 170, 204, 0.2);
    border-radius: 4px;
    color: #98c3ff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mode-toggle-btn:hover {
    transform: translateY(-1px);
}

.mode-toggle-btn.active {
    background: #6afcff;
    color: black;
}

.mode-description {
    margin: 5px 0 15px;
    float: left;
    width: 100%;
    padding: 12px;
    background: rgba(72, 101, 139, 0.1);
    border-radius: 6px;
    text-align: center;
}

.user-input-wrap label {
    text-align: center;
}

/* Series list in modal */
.series-list {
    max-height: 400px;
    overflow-y: auto;
    margin-top: 15px;
}

.series-list>div {
    padding: 12px;
    margin-bottom: 8px;
    border-left: 3px solid #48658b;
    transition: background 0.2s ease;
}

.series-list>div:hover {
    background: rgba(72, 101, 139, 0.05);
}

.series-list a {
    color: #48658b;
    text-decoration: none;
    font-weight: 600;
}

.series-list a:hover {
    text-decoration: underline;
}

.variation-box-wrap {
    float: left;
    width: 100%;
    margin-top: 25px;
    max-width: 100%;
}

.variation-box-wrap h2 {
    text-align: center;
}

.share-box {
    white-space: nowrap;
}

.oomph-cost:not(input) {
    pointer-events: none;
}

/* Allow oomph-cost inputs to be editable */
input.oomph-cost {
    pointer-events: all;
}

.oomph-icon {
    /* background-image: url("data:image/svg+xml;base64,PHN2ZyBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAzMiAzMiIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMzIgMzIiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICA8ZGVmcz4NCiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImdyZWVuR3JhZGllbnQiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPg0KICAgICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3R5bGU9InN0b3AtY29sb3I6IzQzZTg1MiIvPg0KICAgICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdHlsZT0ic3RvcC1jb2xvcjojMjhiMjM3Ii8+DQogICAgPC9saW5lYXJHcmFkaWVudD4NCiAgPC9kZWZzPg0KICA8cG9seWdvbiBmaWxsPSJ1cmwoI2dyZWVuR3JhZGllbnQpIiBwb2ludHM9IjIzLDEgMTEsMSA5LDE5IDEzLDE5IDExLDMxIDIzLDExIDE5LDExIi8+DQo8L3N2Zz4="); */
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' style='display: block;' viewBox='0 0 2048 2048' width='1800' height='1800' preserveAspectRatio='none'%3E%3Cpath transform='translate(0,0)' fill='%236afcff' d='M 1460.82 165.458 C 1473.32 165.207 1492.3 164.706 1503.95 167.895 C 1519.52 172.088 1532.72 182.423 1540.52 196.531 C 1561.59 234.456 1541.81 261.466 1522.7 293.517 L 1492.53 343.972 C 1421.43 460.793 1348.71 576.621 1274.4 691.423 C 1267.99 701.455 1221.41 771.659 1219.7 777.702 C 1222.44 780.851 1244.74 779.258 1250.23 779.265 L 1297.67 779.657 L 1456.2 779.757 C 1479.82 779.678 1510.65 778.12 1533.67 781.02 C 1548.4 784.516 1560.43 794.946 1567.65 807.19 C 1598.44 859.449 1553.36 893.808 1520.66 931.683 L 1450.46 1014.04 L 1109.07 1415.06 L 849.388 1722.22 C 807.874 1771.98 768.067 1823.4 726.367 1873.04 C 719.063 1881.74 713.302 1886.44 703.496 1891.91 C 687.27 1900.52 662.638 1901.49 646.538 1892.42 C 593.497 1862.53 618.617 1811.35 636.19 1771.05 L 662.08 1711.05 C 687.124 1652.67 711.599 1594.05 735.501 1535.19 C 773.295 1442.02 811.601 1349.06 850.418 1256.31 C 864.977 1220.8 879.963 1185.46 895.371 1150.31 C 903.805 1131.26 911.797 1112.42 921.697 1094.08 C 902.942 1093.55 879.937 1094.27 860.575 1094.2 L 696.122 1093.86 C 686.634 1093.84 676.252 1093.77 666.937 1093.92 C 630.367 1094.53 604.337 1098.37 580.547 1065.17 C 562.568 1040.09 571.042 1015.17 577.858 987.703 C 582.345 969.625 587.996 951.416 593.069 933.435 C 603.192 896.26 613.656 859.179 624.461 822.196 C 659.412 694.562 695.236 567.168 731.932 440.025 C 742.754 401.498 753.248 362.879 763.412 324.174 C 771.447 292.996 779.159 262.237 788.289 231.348 C 810.079 157.619 870.987 165.538 933.18 165.887 C 976.901 165.761 1020.62 166.092 1064.34 166.88 C 1162.63 167.481 1260.92 167.267 1359.2 166.239 C 1393.05 165.842 1427.01 166.411 1460.82 165.458 z'/%3E%3C/svg%3E");
    background-size: contain;
    float: left;
    width: 26px;
    height: 26px;
}

#oomph-bar .oomph-icon {
    position: absolute;
    width: 16px;
    height: 16px;
    margin-left: -3px;
    margin-top: -1px;
}

.meta-item .oomph-icon {
    width: 22px;
    height: 22px;
}

#oomph-bar:hover #oomph-bar-text-link,
#oomph-bar-text-link {
    opacity: 1;
    transition: opacity 0.25s linear;
    text-decoration: none;
}

#oomph-bar:not(:hover) #oomph-bar-text-link {
    opacity: 0;
    transition: opacity 0.25s linear;
}

.oomph-bar-text-value.main {
    /* color: #6afcff; */
}

.oomph-bar-text-small {
    font-size: 10px;
}

.modal-box {
    text-align: left;
    margin: 15px 0;
    padding: 10px 15px;
    background: rgba(72, 101, 139, 0.2);
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
    font-size: 15px;
}

.modal-box p {
    margin: 5px 0;
}

#footer-generator-list {
    margin: 0 auto;
    max-width: 98%;
    padding: 0 20px;
    box-sizing: border-box;
}

.footer-generator-list-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 6px;
    box-sizing: border-box;
    overflow: hidden;
    margin-bottom: 25px;
    position: relative;
    overflow: visible;
}

footer {
    float: left;
    text-align: center;
    margin: 0 auto;
    padding: 15px 15px 5px;
    box-sizing: border-box;
}

footer,
.header-wrap,
.generator-description {
    width: 100%;
    width: 650px;
    max-width: calc(100% - 12px);
    max-width: 100%;
}

.header-wrap {
    width: 450px;
}

footer p {
    margin: 10px 0;
}

footer a {
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

#left-sidebar-wrap {
    position: fixed;
    width: 265px;
    width: 0px;
    top: 0;
    bottom: 0;
    left: -10px;
    height: 100vh;
    overflow-y: auto;
    box-sizing: border-box;
    border: none;
    border-right: 1px solid #223552;
    background-color: #0b1521;
    border-radius: 0;
    display: flex;
    align-items: center;
}

.sidebar-header {
    float: left;
    width: 100%;
    text-align: center;
    width: 300px;
}

.loaded #logo .logo-text,
.loaded #logo .logo-dot-com,
.loaded #logo .logo-subtext {
    transition: all 0.25s linear;
}

#logo-item {
    float: left;
    width: 60px;
    height: auto;
    margin-right: 7px;
}

.sidebar .logo-text {
    float: left;
    font-size: 27px;
    margin: 0px 0 0 2px;
}

.sidebar .logo-dot-com {
    float: left;
    color: #f0f0f0;
    font-size: 13px;
    margin-top: 16px;
    margin-left: -4px;
}

.sidebar .logo-subtext {
    float: left;
    font-size: 18px;
    margin: -12px 0 0 3px;
    color: #b7b7b7;
    font-weight: 400;
}

.loaded #logo:hover .logo-text,
.loaded #logo:hover .logo-dot-com {
    color: #f0f0f0;
}

.sidebar {
    padding: 15px 15px 0;
    box-sizing: border-box;
    float: left;
    width: 100%;
}

#cryptocurrency-sidebar .sidebar {
    padding-top: 0;
}

.sidebar h2 {
    text-align: center;
    margin-top: 0;
}

.sidebar h3 {
    float: left;
    margin: 0 0 5px;
}

.sidebar h4 {
    float: left;
    width: 100%;
    margin: 10px 0;
}

.sidebar-list a {
    float: left;
    width: 170px;
    text-align: left;
    font-size: 14px;
    margin: 0 0 5px;
    color: #8ec4ff;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sidebar-list a.sidebar-asset-link {
    clear: left;
    width: fit-content;
    max-width: calc(100% - 55px);
}

.sidebar-list a:hover {
    color: #f0f0f0;
}

.sidebar-list.max .item {
    float: left;
    width: 100%;
}

.sidebar-list.max .item span:first-of-type {
    max-width: calc(100% - 40px);
    float: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0 0 5px;
}

.sidebar-list a.selected {
    color: #f0f0f0;
    position: relative;
}

.compare-item:hover,
.sidebar-list a.selected:hover {
    text-decoration: underline;
    cursor: pointer;
}

.compare-item {
    float: left;
    width: 100%;
    padding: 0 0 5px;
    position: relative;
    box-sizing: border-box;
}

.compare-item::after {
    /* content: ""; */
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50px;
    top: 5px;
    right: 0;
    transition: background-color 0.25s ease-in;
}

.compare-item:hover::after {
    background-color: #f84949;
}

.checked-symbol,
.count,
.sidebar-title-info {
    float: right;
    margin-top: 2px;
}

.checked-symbol {
    content: "";
    width: 20px;
    height: 20px;
    border-radius: 50px;
    margin: 3px 0 0;
    transition: background-color 0.25s ease-in;
}

.hover .checked-symbol {
    background-color: #f84949;
}

.checked-wrap {
    float: left;
    width: 100%;
}

.checked-wrap .count {
    display: none;
}

#oomph-bar {
    width: 382px;
    height: 12px;
    margin: 10px auto 9px;
    position: relative;
    display: inline-block;
    max-width: 100%;
}

.oomph-bar-bg {
    float: left;
    width: 100%;
    border-radius: 20px;
    height: 100%;
    border: 1px solid #19304d;
    background-color: #000000;
    overflow: hidden;
    position: relative;
}

.oomph-bar-level {
    float: left;
    width: 0%;
    max-width: calc(100% - 4px);
    margin: 2px 2px 0;
    height: 8px;
    border-radius: 20px;
    /* background: linear-gradient(to right, #76ffa2, #2ab357); */
    background-color: #6afcff;
}

.loaded .oomph-bar-level {
    transition: width 1s linear;
}

.outlink-wrap {
    float: left;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: start;
}

.oomph-bar-text {
    position: absolute;
    right: -10px;
    top: -16px;
    bottom: 0;
    margin: auto;
    font-size: 12px;
    /* color: #f0f0f0; */
    cursor: pointer;
}

.loaded .oomph-bar-text {
    transition: all 0.25s linear;
}

.oomph-bar-text:hover {
    color: #f0f0f0;
}

.outlink {
    position: relative;
    width: 450px;
    max-width: 80%;
    height: auto;
    margin-top: 50px;
    margin-bottom: 50px;
}

.outlink::after {
    content: "Ad";
    position: absolute;
    left: 0;
    top: -20px;
    font-size: 15px;
}

.outlink img {
    max-width: 100%;
    height: auto;
}

.logo-container {
    text-align: left;
    margin-bottom: 25px;
}

.max-notice {
    margin-top: 15px;
    font-size: 15px;
    float: left;
    box-sizing: border-box;
}

.form-row {
    float: left;
    width: 100%;
}

.generate-btn-wrap {
    float: left;
    width: 100%;
    margin: 35px 0 0 0;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-direction: column;
}

.generate-btn-wrap.center {
    justify-content: center;
}

.generate-btn-wrap>div {
    width: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.generate-btn-wrap label,
.output-item-footer label {
    white-space: nowrap;
    text-align: center;
    width: 100%;
}

.generate-btn-wrap input,
.output-item-footer input {
    width: 100%;
}

button.generate-btn.generating,
button.generate-img-btn.generating,
button.upscale-btn.generating {
    pointer-events: none;
}

button.generate-btn.generating,
button.generate-img-btn.generating,
button.upscale-btn.generating {
    animation: loading-animation 10s ease-in-out infinite;
}

/* Keyframes for the border animation */
@keyframes loading-animation {
    20% {
        background-color: #f685f0;
    }

    40% {
        background-color: #6afcff;
    }

    60% {
        background-color: #c2b8ff;
    }

    80% {
        background-color: #fad373;
    }
}

.generate-img-btn {
    height: 35px;
}

.center-text,
.page #page-wrap.center-text {
    text-align: center;
}

.center-text ul,
.page #page-wrap ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.settings-wrap {
    display: grid;
    grid-template-columns: 36% 1fr;
    gap: 10px;
    width: 100%;
    margin: 0px 0 25px;
    position: relative;
    padding: 10px 10px 0;
    box-sizing: border-box;
    overflow: hidden;
}

.settings-wrap::before {
    content: "Settings";
    font-size: 17px;
    margin-bottom: -15px;
    text-align: center;
    width: 100%;
    position: absolute;
    left: 0;
    top: -28px;
    right: 0;
    margin: 0 auto;
}

.settings-wrap label {
    text-align: right;
    margin: 0;
}

.settings-wrap select {
    float: left;
    clear: left;
    height: 35px;
    width: 100%;
}

.settings-wrap input {
    text-align: left;
    height: 35px;
    margin: 0;
}

input#prompt,
div#prompt,
.contenteditable {
    /* color: #fad373; */
    color: #f0f0f0;
    padding: 15px 15px;
    box-sizing: border-box;
    transition: all 0.15s ease-in;
    text-align: left;
    max-height: 500px;
    overflow: auto;
    cursor: text;
}

input#prompt:hover,
input#prompt:focus,
div#prompt:hover,
div#prompt:focus {
    /* color: #f0f0f0; */
    /* background-color: rgb(59 133 255 / 52%); */
    /* border-color: #f0f0f0; */
    /* text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.56); */
}

/* Contenteditable placeholder support */
div#prompt.contenteditable:empty::before {
    content: attr(data-placeholder);
    color: #759ccb;
    pointer-events: none;
}

div#prompt.contenteditable:focus:empty::before {
    opacity: 0.5;
}

div#prompt.contenteditable:focus {
    /* border-color: #6afcff; */
}

/* Ensure contenteditable behaves like input */
div#prompt.contenteditable {
    outline: none;
    white-space: pre-wrap;
    word-wrap: break-word;
    min-height: 20px;
}

div#prompt.contenteditable:focus {
    outline: none;
}

/* Generic contenteditable placeholder + behavior for all user inputs */
div.user-input.contenteditable:empty::before {
    content: attr(data-placeholder);
    color: #759ccb;
    pointer-events: none;
}

div.user-input.contenteditable:focus:empty::before {
    opacity: 0.5;
}

div.user-input.contenteditable {
    outline: none;
    white-space: pre-wrap;
    word-wrap: break-word;
    min-height: 20px;
}

div.user-input.contenteditable:focus {
    outline: none;
}

/* Clickable oomph cost label */
.oomph-cost-label.clickable {
    cursor: pointer;
    transition: all 0.15s ease-in;
}

.oomph-cost-label.clickable:hover {
    opacity: 0.8;
    text-shadow: 0 0 4px rgba(240, 240, 240, 0.5);
}

#output .oomph-btn {
    background: none;
    box-shadow: none;
    color: #f0f0f0;
    transition: none;
    cursor: pointer;
}

#output .oomph-btn:hover,
#output .oomph-btn:active {
    transition: none;
    transform: none;
}

#show-more-settings-btn {
    display: inline-block;
}

#show-more-btn {
    display: inline-block;
    margin: 25px auto 0;
}

#show-more-settings {
    visibility: hidden;
    max-height: 0;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 36% 1fr;
    gap: 10px;
    transition: all 0.25s linear;
}

.setting-spanner {
    grid-column: 1 / -1;
    text-align: center;
}

#show-more-settings.visible {
    visibility: visible;
    max-height: 750px;
    margin-bottom: 15px;
    box-sizing: border-box;
}

#show-more-wrap {
    visibility: hidden;
    max-height: 0;
    transition: all 0.25s linear;
}

#show-more-wrap.visible {
    visibility: visible;
    max-height: 600px;
}

.output-image {
    max-width: 100%;
    height: auto;
}

/* Image */

.image-container {
    float: left;
    width: 100%;
    margin: 10px -10px;
    padding: 10px;
    border: 1px solid #223552;
    border-radius: 4px;
    position: relative;
}

.story .image-container,
.meme .image-container {
    width: calc(100% + 40px);
    margin: -25px -20px 5px;
    border: none;
    /* border-bottom: 1px solid #223552; */
    border-radius: 0;
    padding: 0;
}

.meme .meme-image-placeholder .image-container {
    /* width: calc(100% + 30px);
    margin: -25px -15px 5px; */
    width: 100%;
    margin: 0 0 25px;
    border-radius: 4px;
}

.image-container img {
    border-radius: 4px;
}

.story-text {
    margin-top: 20px;
}

.tattoo .image-container {
    border: none;
}

.image-container img {
    max-width: 100%;
    height: auto;
}

/* Thumbnail image upload section */
#thumbnail-image-upload-section {
    background: rgba(72, 101, 139, 0.2);
    border: 1px solid #223552;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
}

#thumbnail-upload-heading {
    margin-top: 0;
    color: #88aacc;
}

#thumbnail-upload-description {
    color: #88aacc;
    font-size: 0.9em;
    margin-bottom: 15px;
}

#thumbnail-upload-method-section {
    margin-bottom: 15px;
}

#thumbnail-file-upload-controls {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
    float: left;
    width: 100%;
    justify-content: center;
}

#thumbnail-image-file {
    display: none;
}

#thumbnail-file-name {
    color: #88aacc;
    font-size: 0.9em;
}

#thumbnail-upload-divider {
    margin: 10px 0;
    text-align: center;
}

#thumbnail-upload-divider span {
    color: #88aacc;
    font-size: 0.85em;
}

#thumbnail-image-url {}

#thumbnail-image-preview-container {
    flex: 1;
    min-width: 200px;
    display: none;
}

#thumbnail-preview-wrapper {
    position: relative;
    display: inline-block;
}

#thumbnail-image-preview {
    max-width: 300px;
    max-height: 300px;
    border-radius: 8px;
    border: 2px solid #48658b;
}

#video-uploaded-ending-frame-preview {
    width: 100%;
    height: auto;
}

#thumbnail-remove-image {
    position: absolute;
    top: 5px;
    right: 5px;
    padding: 5px 10px;
    background: rgba(255, 0, 0, 0.8);
}

#thumbnail-remove-image:hover {
    background: rgba(255, 0, 0, 1);
}

/* Legacy thumbnail preview container class */
.thumbnail-image-preview-container {
    flex: 1;
    min-width: 200px;
    display: none;
}

button.link-btn {
    height: auto;
    background: none;
    padding: 0;
    margin: 0;
    color: #98c3ff;
    box-shadow: none;
}

.loaded button.link-btn {
    transition: color 0.25s linear;
}

.loaded button.link-btn:hover {
    color: #f0f0f0;
    box-shadow: none;
    transition: color 0.25s linear;
}

.permalink-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1.2em;
    text-decoration: none;
    opacity: 0.6;
    transition: opacity 0.2s, transform 0.2s;
    z-index: 10;
    cursor: pointer;
}

.permalink-icon:hover {
    opacity: 1;
    transform: scale(1.1);
}

.blogpost-output .permalink-icon {
    top: 27px;
}

.blogpost-output {
    position: relative;
}

.elaborate-btn {
    height: 35px;
}

button.disabled {
    pointer-events: none;
}

#header-menu a,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Open Sans Medium", sans-serif;
}

#header-menu a {
    text-decoration: none;
    padding: 2px 5px;
    width: fit-content;
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    padding: 8px 16px;
    border-radius: 6px;
    text-decoration: none;
    height: unset;
    border: 1px solid #294264;
    background-color: #132232;
    box-shadow: 2px 2px 2px black, 0 0 3px #000;
    transition: all 0.2s ease;
}

#page-desc-wrap {
    margin: 30px auto 20px;
}

.page-desc {
    float: left;
    width: 100%;
    margin-bottom: 10px;
}

.page #page-wrap,
#page-wrap,
#wide-wrap {
    text-align: left;
    min-height: calc(100vh - 125px);
}

#welcome-wrap {
    margin: 0 0 20px;
    text-align: center;
}

.modal-wrap {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
}

.modal-outer {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 200;
}

.modal-bg {
    position: fixed;
    left: 0;
    right: 0;
    margin: auto;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.35);
    transition: all 0.25s linear;
}

.loaded #login-wrap,
.loaded #reset-wrap,
.loaded .modal-wrap {
    transition: all 0.25s linear;
}

.modal {
    box-sizing: border-box;
    width: 369px;
    width: 325px;
    padding: 0 15px;
    max-height: 95vh;
    max-width: 95vw;
    pointer-events: all;
    position: relative;
    overflow-y: auto;
    opacity: 0;
    animation: fadeIn 0.25s linear forwards;
}

/* #oomph-breakdown-modal.modal {
    width: 333px;
} */

#login-modal.modal,
#reset-modal.modal,
#register-modal.modal {
    overflow: visible;
    width: 300px;
}

#login-modal button.default-btn.toggle-register-btn,
#login-modal button.default-btn.toggle-login-btn {
    margin-top: 15px;
}

#login-form,
#reset-request-form,
#register-form .modal-notice {
    margin-bottom: 0;
}

label[for="info-consent-inpt"].checkbox {
    margin-top: 15px;
}

.modal h3 {
    margin: 15px 0 0;
}


#login-modal h3,
#register-modal h3,
#reset-modal h3 {
    display: none;
}

#live-chat-btn {
    float: left;
    margin: 5px 0 30px;
}

.why-modal {
    float: left;
    width: 100%;
    padding: 20px 0 0;
    color: #f0f0f0;
    font-size: 15px;
}

.modal-msg {
    margin: 10px 0 15px;
    float: left;
    width: 100%;
}

.success {
    color: #6afcff;
}

.error {
    color: #f84949;
}

.modal-x-btn {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 130;
    color: inherit;
    text-decoration: none;
    background-color: transparent;
    line-height: 33px;
    font-size: 27px;
    padding: 0px 10px;
    font-family: monospace;
    height: 21px;
    z-index: 300;
}

.modal-x-btn:hover {
    color: #f0f0f0;
    text-decoration: none;
}

.modal-x-btn::after,
.modal-x-btn::before {
    content: "";
    position: absolute;
    top: 9px;
    right: 0;
    width: 24px;
    height: 6px;
    transition: background-color 0.25s linear;
}

.modal-x-btn:hover::after,
.modal-x-btn:hover::before {
    background-color: #f0f0f0;
}


.modal-x-btn::before {
    transform: rotate(45deg);
}

.modal-x-btn::after {
    transform: rotate(-45deg);
}

.modal-notice {
    float: left;
    width: 100%;
    text-align: center;
    margin: 0 0 15px;
    color: #f0f0f0;
}

.modal-notice.medium-font {
    font-size: 15px;
}

#search-modal.modal {
    overflow: hidden;
    width: 450px;
}

.modal {
    opacity: 0;
    text-align: center;
}

.loaded .modal {
    transition: all 0.25s ease-in-out;
    opacity: 1;
}

.modal .default-btn {
    /* float: left; */
    width: 100%;
    height: 35px;
    margin: 0 0 15px;
}

#init-verify-box input,
#register-form input:focus {
    border-color: #6afcff;
}

#login-form input:focus {
    border-color: #f685f0;
}

#reset-request-form input:focus {
    border-color: #fad373;
}

input:-webkit-autofill,
input:-webkit-autofill:focus {
    background-color: #132232;
    color: #f0f0f0 !important;
    -webkit-box-shadow: 2px 2px 0px inset #132232, 0 0 0 30px #132232 inset !important;
    -webkit-box-shadow: 0 0 0 30px #132232 inset !important;
    -webkit-text-fill-color: #f0f0f0 !important;
}

#login-modal .before-two {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    margin: -42px auto 0;
    padding: 16px;
    width: 52px;
    height: 52px;
    border-radius: 100%;
    background: #0b1521;
}

#login-modal button.default-btn.toggle-login-btn {
    float: right;
    width: 50%;
    width: calc(50% - 5px);
}

#login-modal.register-success button.default-btn.toggle-login-btn {
    width: 100%;
    margin: 0 0 15px;
}

#login-modal button.default-btn.toggle-register-btn,
.modal button.default-btn.modal-close-btn {
    width: 100%;
    margin: 15px auto;
    grid-column: 1 / -1;
}

.modal button.default-btn.cancel-btn,
.modal button.default-btn.modal-close-btn {
    display: inline-block;
    width: 268px;
    max-width: 100%;
    background-color: #f69e6a;
}

button,
.choose-sub,
a.button {
    cursor: pointer;
    border: none;
    position: relative;
    padding: 5px 15px;
    font-size: inherit;
    text-decoration: none;
    border-radius: 4px;
}

/* button:hover,
.choose-sub:hover {
    text-decoration: underline;
} */

#login-modal.login-toggled #login-form,
#login-modal.register-success .success-msg,
#login-modal.register-toggled #register-form,
#login-modal.reset-toggled #reset-request-form,
#reset-wrap.success .success-msg {
    display: block;
}

#login-modal.login-toggled .login-chooser,
#login-modal.register-success .login-chooser,
#login-modal.register-toggled .login-chooser,
#login-modal.reset-toggled .login-chooser,
#reset-wrap.success #reset-pass-form {
    display: none;
}

label {
    float: left;
    width: 100%;
    padding: 5px 0;
    margin-top: 5px;
    position: relative;
    cursor: pointer;
}

input {
    width: 100%;
    box-sizing: border-box;
    padding: 0 15px;
    line-height: 34px;
    height: 35px;
    margin-bottom: 5px;
    font-size: inherit;
    text-align: center;
}

.modal .desc {
    font-size: 15px;
    text-align: left;
    position: absolute;
    margin: -95px 0 0 15px;
    padding: 10px;
    width: calc(100% - 50px);
    pointer-events: none;
    background-color: #0b1521;
    color: inherit;
}

form .desc {
    display: none;
}

form .focused .desc {
    display: block;
}

label:hover {
    text-decoration: underline;
}

#site-wrap input:focus::placeholder,
.modal input:focus::placeholder,
#site-wrap textarea:focus::placeholder {
    opacity: 0.65;
}

form input[type="radio"] {
    cursor: pointer;
}

.choose-frequency {
    float: left;
    display: flex;
}

.modal input[type="checkbox"] {
    width: auto;
    box-shadow: none;
    margin-right: 10px;
}

.checkbox input[type="checkbox"],
.checkbox input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

label.checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 16px;
    line-height: 18px;
    position: relative;
    padding: 2px 0 0 37px;
    box-sizing: border-box;
    text-align: left;
}

label.checkbox:hover {
    text-decoration: none;
}

.checkbox .checkmark {
    position: absolute;
    left: 0;
    top: 11px;
    height: 20px;
    width: 20px;
    border-radius: 100%;
}

.checkbox input[type="checkbox"]:checked+.checkmark,
.checkbox input[type="radio"]:checked+.checkmark {
    background-color: #6afcff;
    border-color: #6afcff;
    box-shadow: none;
}

.checkbox .checkmark::after {
    content: "";
    position: absolute;
    display: none;
    left: 6px;
    top: 2px;
    width: 6px;
    height: 12px;
    border: solid #000;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox input[type="checkbox"]:checked+.checkmark::after,
.checkbox input[type="radio"]:checked+.checkmark::after {
    display: block;
}

/* 
#search-box-form {
    padding-top: 16px;
}

#search-box-form label {
    margin: 0;
    padding: 0;
}

.modal input#search-input {
    padding-bottom: 0;
    margin-bottom: 5px;
}

#search-results {
    float: left;
    width: 100%;
    margin-bottom: 10px;
    height: calc(100% - 66px);
    overflow-y: auto;
}

.search-result-item {
    float: left;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: space-between;
    column-gap: 10px;
    float: left;
    width: 100%;
    margin-top: 3px;
    text-align: left;
    padding: 0 5px 3px 0;
    box-sizing: border-box;
    font-size: 15px;
    border-bottom: 1px solid #223552;
}

.search-result-item div:nth-of-type(2) {
    display: flex;
    column-gap: 10px;
    align-items: center;
}

.search-result-item:first-of-type {
    margin-top: 10px;
}

.search-result-item:last-of-type {
    border-bottom: none;
} */

button.default-btn.sidebar-login-btn {
    margin: 20px 0 0;
    background-color: #66ff94;
}

button.info-clicker,
button.model-info-btn {
    content: "";
    width: 20px;
    height: 20px;
    padding: 0;
    border-radius: 100%;
    cursor: pointer;
    color: black;
    font-family: "Open Sans Medium", sans-serif;
    font-size: 13px;
    transition: all 0.25s linear;

    margin-left: 6px;
}

.info-clicker:hover {
    text-decoration: none;
}

#info-modal {
    width: 369px;
}

#info-modal .item {
    float: left;
    box-sizing: border-box;
    width: 100%;
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
    /* margin-bottom: 15px; */
}

#info-modal audio {
    margin: 15px 0;
}

/* Model Info Modal Styles */
.model-info-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 15px 0;
    max-height: 500px;
    overflow-y: auto;
}

.model-info-item {
    background-color: rgba(152, 195, 255, 0.05);
    border: 1px solid #223552;
    border-radius: 6px;
    padding: 12px;
}

.model-info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.model-info-header strong {
    color: #6afcff;
    font-size: 15px;
}

.model-cost {
    background-color: rgba(106, 252, 255, 0.15);
    color: #6afcff;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: bold;
}

.model-info-description {
    color: #98c3ff;
    font-size: 14px;
    line-height: 1.5;
}

#pricing-modal.modal {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    column-gap: 15px;
    width: 1250px;
    padding: 15px;
    box-sizing: border-box;
    text-align: left;
    overflow: auto;
    background-color: #0b1521;
}

#pricing-modal h3 {
    margin: 0;
    grid-column: 1 / 4;
}

#pricing-modal h3,
#pricing-switch-wrap {
    margin-top: 0;
    margin-bottom: 20px;
    padding: 0;
}

#pricing-modal p {
    margin: 5px 0;
}

#pricing-tiers {
    display: grid;
    grid-column: 1 / 6;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 15px;
}

.pricing-modal-footer {
    margin: 10px 0 0;
    text-align: center;
    grid-column: 1 / 6;
}

.sub-tier {
    display: flex;
    flex-direction: column;
    padding: 15px;
    border: 1px solid #223552;
    border-radius: 4px;
    background-color: #000000;
    border: 1px solid #294264;
    border-radius: 6px;
    background-color: #000000;
    background-color: #132232;
}

.sub-tier-header {
    float: left;
    width: 100%;
    font-size: 29px;
    color: #6afcff;
}

.small {
    font-size: 13px;
}

#pricing-modal .yearly {
    display: flex;
}

#pricing-modal .monthly-price {
    display: none;
}

#pricing-modal.monthly .monthly-price {
    display: block;
}

#pricing-modal.monthly .yearly-price {
    display: none;
}

.sub-tier-sub-header {
    font-size: 21px;
    color: #fad373;
    margin: -5px 0 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.sub-tier-sub-header .small {
    color: #98c3ff;
}

.sub-tier-benefits {
    margin: 15px 0;
}

.sub-tier-benefits span {
    float: left;
    margin-bottom: 12px;
    width: 100%;
    display: flex;
    align-content: center;
    justify-content: start;
    line-height: 20px;
}

.sub-tier-benefits span::before {
    content: "";
    color: #6afcff;
    font-size: 20px;
    float: left;
    margin: auto 5px auto 0;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjUxMnB4IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgd2lkdGg9IjUxMnB4IiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48cGF0aCBmaWxsPSIjNmFmY2ZmIiBkPSJNNDQ4LDcxLjljLTE3LjMtMTMuNC00MS41LTkuMy01NC4xLDkuMUwyMTQsMzQ0LjJsLTk5LjEtMTA3LjNjLTE0LjYtMTYuNi0zOS4xLTE3LjQtNTQuNy0xLjggIGMtMTUuNiwxNS41LTE2LjQsNDEuNi0xLjcsNTguMWMwLDAsMTIwLjQsMTMzLjYsMTM3LjcsMTQ3YzE3LjMsMTMuNCw0MS41LDkuMyw1NC4xLTkuMWwyMDYuMy0zMDEuNyAgQzQ2OS4yLDExMC45LDQ2NS4zLDg1LjIsNDQ4LDcxLjl6Ii8+PC9zdmc+");
    background-size: contain;
}

.sub-tier-benefits span:first-of-type::before {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' style='display: block;' viewBox='0 0 2048 2048' width='1800' height='1800' preserveAspectRatio='none'%3E%3Cpath transform='translate(0,0)' fill='%236afcff' d='M 1460.82 165.458 C 1473.32 165.207 1492.3 164.706 1503.95 167.895 C 1519.52 172.088 1532.72 182.423 1540.52 196.531 C 1561.59 234.456 1541.81 261.466 1522.7 293.517 L 1492.53 343.972 C 1421.43 460.793 1348.71 576.621 1274.4 691.423 C 1267.99 701.455 1221.41 771.659 1219.7 777.702 C 1222.44 780.851 1244.74 779.258 1250.23 779.265 L 1297.67 779.657 L 1456.2 779.757 C 1479.82 779.678 1510.65 778.12 1533.67 781.02 C 1548.4 784.516 1560.43 794.946 1567.65 807.19 C 1598.44 859.449 1553.36 893.808 1520.66 931.683 L 1450.46 1014.04 L 1109.07 1415.06 L 849.388 1722.22 C 807.874 1771.98 768.067 1823.4 726.367 1873.04 C 719.063 1881.74 713.302 1886.44 703.496 1891.91 C 687.27 1900.52 662.638 1901.49 646.538 1892.42 C 593.497 1862.53 618.617 1811.35 636.19 1771.05 L 662.08 1711.05 C 687.124 1652.67 711.599 1594.05 735.501 1535.19 C 773.295 1442.02 811.601 1349.06 850.418 1256.31 C 864.977 1220.8 879.963 1185.46 895.371 1150.31 C 903.805 1131.26 911.797 1112.42 921.697 1094.08 C 902.942 1093.55 879.937 1094.27 860.575 1094.2 L 696.122 1093.86 C 686.634 1093.84 676.252 1093.77 666.937 1093.92 C 630.367 1094.53 604.337 1098.37 580.547 1065.17 C 562.568 1040.09 571.042 1015.17 577.858 987.703 C 582.345 969.625 587.996 951.416 593.069 933.435 C 603.192 896.26 613.656 859.179 624.461 822.196 C 659.412 694.562 695.236 567.168 731.932 440.025 C 742.754 401.498 753.248 362.879 763.412 324.174 C 771.447 292.996 779.159 262.237 788.289 231.348 C 810.079 157.619 870.987 165.538 933.18 165.887 C 976.901 165.761 1020.62 166.092 1064.34 166.88 C 1162.63 167.481 1260.92 167.267 1359.2 166.239 C 1393.05 165.842 1427.01 166.411 1460.82 165.458 z'/%3E%3C/svg%3E");
}

.sub-tier-benefits span.yearly-oomph,
.sub-tier-benefits span.monthly-oomph {
    float: none;
    margin: 0;
    width: unset;
    display: unset;
    line-height: unset;
}

.sub-tier-benefits span.yearly-oomph::before,
.sub-tier-benefits span.monthly-oomph::before {
    display: none;
}

#pricing-modal.monthly .sub-tier-benefits span.yearly-oomph,
#pricing-modal .sub-tier-benefits span.monthly-oomph {
    display: none;
}

#pricing-modal.monthly .sub-tier-benefits span.monthly-oomph {
    display: block;
}

#pricing-switch-wrap.switch-wrap {
    justify-content: end;
    grid-column: 4/ 5;
}

.choose-sub {
    padding: 5px 20px;
    width: 100%;
    box-sizing: border-box;
    color: #000;
    margin: auto 0 0;
    text-align: center;
    border-radius: 4px;
}

.choose-sub:hover {
    text-decoration: none;
    color: #000;
}

.header-wrap {
    margin: 0 auto 15px;
    padding: 12px 15px 5px;
    box-sizing: border-box;
    z-index: 100;
    text-align: center;
}

#header-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 12px;
}

#map-wrap {
    width: 100%;
    height: 350px;
    display: inline-block;
    margin: 0 auto;
}

#map {
    width: 750px;
    max-width: 100%;
    height: 350px;
    display: inline-block;
    margin: 0 auto;
}

ul li {
    margin-bottom: 5px;
}

ul.cookies li {
    text-overflow: ellipsis;
    overflow-x: hidden;
    white-space: nowrap;
}

.italic {
    font-style: italic;
}

#mobile-bot-bar {
    position: fixed;
    bottom: 0;
    right: 0;
}

/* Menu Btn */
.menu-btn {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 22px;
    width: 22px;
}

.menu-btn .bar {
    height: 4px;
    width: 100%;
    background-color: black;
    transition: all 0.25s linear;

}

.menu-btn:hover {
    cursor: pointer;
}

.x:nth-of-type(1) {
    transition: all 0.25s linear;
    transform: rotate(45deg);
    transform-origin: top left;
    width: 28px;
    margin: -2px 0 0 2px;
}

.x:nth-of-type(2) {
    transition: all 0.25s linear;
    transform-origin: center;
    width: 0;
}

.x:nth-of-type(3) {
    transition: all 0.25s linear;
    transform: rotate(-45deg);
    transform-origin: bottom left;
    width: 28px;
    margin-left: 2px;
}

#mobile-bot-bar button#menu-btn,
#mobile-bot-bar button#search-btn,
#mobile-bot-bar button#share-btn,
#plus-btn,
#site-header-right button#share-btn,
#update-btn {
    width: 50px;
    height: 50px;
    background: #f0f0f0;
    border-radius: 100%;
    cursor: pointer;
    border: none;
    float: right;
    margin: 0 15px 15px 0;
    text-align: center;
}

#mobile-bot-bar button#menu-btn {
    display: flex;
    padding: 15px;
}

#plus-btn,
#update-btn {
    visibility: hidden;
    bottom: 65px;
    position: absolute;
    right: 0;
    opacity: 0;
}

.loaded #plus-btn,
.loaded #update-btn {
    transition: all 0.25s ease-in;
}

#plus-btn svg,
#update-btn svg {
    margin: 0 0 -3px;
}

#plus-btn.visible,
#update-btn.visible {
    visibility: visible;
    opacity: 1;
}

#mobile-bot-bar button#menu-btn {
    display: none;
}

#mobile-bot-bar button#menu-btn svg,
#mobile-bot-bar button#search-btn svg,
#mobile-bot-bar button#share-btn svg {
    width: 25px;
    height: 25px;
    margin-top: 3px;
    fill: #0b1521;
}

#mobile-bot-bar button#menu-btn svg {
    width: 23px;
    height: 23px;
    margin-top: 3px;
}

#mobile-bot-bar button#share-btn svg {
    margin-left: -2px;
}

#site-content.hidden {
    display: none;
}

.share {
    float: right;
}

#share-btns-wrap.visible {
    opacity: 1;
    visibility: visible;
}

#share-btns-wrap {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    z-index: 101;
    bottom: 71px;
    width: 69px;
    margin-left: -11px;
    box-sizing: border-box;
    padding: 10px;
    border-radius: 35px;
    background: none;
    transition: opacity 0.25s ease-in;
    text-align: center;
}

.share-img {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    border: none;
    padding: 0;
    margin: 0 0 15px;
    color: inherit;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background: #f0f0f0;
    transition: background-color 0.5s;
    float: left;
    overflow: hidden;
}

.share-img:last-of-type {
    margin-bottom: 0;
}

.share-img svg path {
    fill: #0b1521;
}

#fb-svg {
    margin: 0 -4px -21px 0;
    width: 17px;
    height: auto;
}

#tw-svg {
    width: 27px;
    height: auto;
    margin: 6px 0 0;
}

#em-svg {
    width: 26px;
    height: auto;
    margin: 5px 0 0 1px;
}

#link-svg {
    width: 23px;
    height: auto;
    margin: 13px 0 0;
}

#title-field,
#url-field {
    position: absolute;
    left: -999999px;
}

/* CSS */
.dropdown-wrap {
    position: relative;
    box-sizing: border-box;

    background-color: #0b1521;
    text-shadow: 2px 2px 0px #284261;
    color: inherit;
    margin-bottom: 10px;
    font-size: inherit;
    border: 1px solid #223552;
    width: calc(100% + 20px);
    text-align: left;
    margin-left: -10px;
}

.dropdown-wrap button {
    border: none;
    padding: 10px;
    background: none;
    color: #f0f0f0;
    font-size: inherit;
    cursor: pointer;
    width: 100%;
    text-align: left;
}

.dropdown-wrap button:hover {
    background-color: #48658b;
}

.dropdown-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
}

.expanded .dropdown-menu {
    max-height: 250px;
}

.dropdown-button::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 18px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #f0f0f0;
    /* Arrow color */

    /* Rounded edges */
    transition: transform 0.25s ease-in-out;
}

.expanded .dropdown-button::after {
    transform: translateY(-50%) rotate(180deg);
}

input,
textarea,
button,
select,
a.button {
    font-family: inherit;
    font-size: inherit;
}

/* 
input:focus {
    outline: none;
    border-color: #f0f0f0;
} */

/* Scrollbars */

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: #000000;
    opacity: 0;
    width: 0;
    margin: 6px 0;
}

#left-sidebar-wrap::-webkit-scrollbar-track {
    border-left: none;
}

.modal ::-webkit-scrollbar-track {
    background: #0b1521;
}


::-webkit-scrollbar-thumb:active,
::-webkit-scrollbar-thumb:hover,
#left-sidebar-wrap:hover::-webkit-scrollbar-thumb:hover {
    background-color: #182840;
}

::-webkit-scrollbar-corner {
    background: #000000;
}

.hidden {
    display: none;
}

.output-list {
    float: left;
    width: 100%;
}

.output-item {
    float: left;
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
    position: relative;
}

.generator .output-item {
    margin-bottom: 55px;
    margin-bottom: 35px;
}

.output-item:first-of-type {
    margin-top: 15px;
    /* padding-top: 15px;
    border-top: 1px solid #19304d; */
}

.output-item:last-of-type {
    margin-bottom: 25px;
    /* margin-bottom: 0; */
    /* border-bottom: 1px solid #19304d; */
}

.story .output-item:last-of-type {
    margin-bottom: 50px;
}

.story .story-title,
.podcast-output .story-title {
    font-size: 1.5em;
    color: #f0f0f0;
    margin-bottom: 20px;
    border-bottom: 1px solid rgb(74, 106, 138);
    padding-bottom: 10px;
    margin: 0 -20px 25px;
}

.output-item h3 {
    margin: 5px 0 0;
}

.output-item p {
    margin-bottom: 25px;
}

.output-item .text-idea {
    margin: 0 0 10px;
    position: absolute;
    top: -30px;
    left: 10px;
    color: #f0f0f0;
    background-color: #000000;
    border: 1px solid #19304d;
    border-bottom: none;
    padding: 5px 15px 0;
    border-radius: 4px 4px 0 0;
}

button.use-idea-btn {
    margin: 15px 0;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (max-width: 1000px) {
    #site-wrap {
        width: 100%;
    }

    #site-content-wrap {
        margin: 0 50px 50px;
    }

    #pricing-modal.modal {
        row-gap: 20px;
        width: 350px;
    }

    #pricing-modal h3,
    #pricing-switch-wrap.switch-wrap,
    #pricing-modal.modal .sub-tier {
        grid-column: 1/6;
        justify-content: center;
    }

    #pricing-modal h3,
    #pricing-switch-wrap {
        text-align: center;
        margin: 0;
    }
}

@media (min-width: 701px) {
    h1#entry-title {
        margin-bottom: 10px;
    }
}

@media (max-width: 700px) {
    h2 {
        font-size: 23px;
    }

    h3 {
        font-size: 23px;
    }

    #site-content-wrap {
        margin: 0 10px 50px;
    }

    h1#entry-title {
        margin-top: 15px;
        margin-bottom: 5px;
    }

    h1#entry-title>span {
        padding: 0px 9px;
    }

    h1#entry-title .asset-name,
    h1#entry-title .asset-type {
        font-size: 11px;
    }

    h2.chart-page-separator {
        font-size: 24px;
    }

    .settings-wrap,
    #show-more-settings {
        grid-template-columns: 1fr;
    }

    .settings-wrap label {
        margin: 0 0 -5px;
        text-align: center;
        padding-bottom: 0;
    }

    .settings-wrap input,
    .settings-wrap select {
        font-size: 14px;
        text-align: center;
    }

    .generator-browse .creations-grid {
        grid-template-columns: 1fr;
    }

    .generate-btn-wrap>div {
        width: fit-content;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .output-item-footer {
        flex-direction: column;
        gap: 15px;
        margin-top: 15px;
    }

    .generate-btn-wrap {
        flex-direction: column;
    }

    .generate-btn-wrap input,
    .output-item-footer input {
        width: 100px;
        box-sizing: border-box;
    }

    .settings-wrap button.info-clicker,
    .settings-wrap button.model-info-btn {
        left: unset;
        right: 0;
    }

    #affiliate-register,
    #affiliate-dashboard {
        float: none;
    }

    .output-item-rate-share {
        flex-direction: column;
    }

    #page-wrap {
        padding: 0 15px;
        padding: 0;
        margin: 0;
        text-align: center;
    }

    .generator-wrap {
        padding: 0;
        margin: 0 auto;
        width: 100%;
    }
}

/* Recipe Output Styling */
/* .recipe-summary {
    display: flex;
    gap: 30px;
    flex-wrap: nowrap;
    justify-content: flex-start;
    background: linear-gradient(135deg, #1a3a5a 0%, #2a4a6a 100%);
    border: 1px solid #3a5a7a;
    border-radius: 8px;
    padding: 15px 20px;
    margin: 15px 0 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
} */

.recipe-stat {
    display: flex;
    gap: 5px;
    min-width: 120px;
}

.recipe-stat-label {
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.output-item h4 {
    color: #f0f0f0;
    font-size: 24px;
    margin: 20px 0 10px;
    text-align: left;
    border-bottom: 1px solid #2a4a6a;
    padding-bottom: 5px;
}

.output-item h4:first-of-type {
    margin-top: 15px;
}

/* ============================================
   GENERIC CONTENT COMPONENTS
   These classes can be reused across all generators
   ============================================

   USAGE EXAMPLES:

   1. CONTENT GRID (for any list of items with name/detail pairs)
      - Use for: ingredients, features, specifications, requirements, etc.
      - Structure:
        <div class="content-grid">
            <div class="content-item">
                <span class="item-name">Item Name</span>
                <span class="item-detail">Detail</span>
            </div>
        </div>

   2. STEP CONTAINER (for sequential instructions/steps)
      - Use for: instructions, directions, process, tutorial steps, etc.
      - Structure:
        <div class="step-container">
            <div class="step-item">
                <div class="step-number">1</div>
                <div class="step-text">Step description</div>
            </div>
        </div>

   Features:
   - Responsive grid layout
   - Hover animations
   - Mobile-friendly
   - Consistent styling across all generators
   ============================================ */

/* Generic Content Grid - can be used for ingredients, items, features, etc. */
.content-grid {
    float: left;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px;
    margin: 15px 0 25px;
}

.content-item {
    background: linear-gradient(135deg, #1e3a5a 0%, #2a4a6a 100%);
    border: 1px solid #3a5a7a;
    border-radius: 8px;
    padding: 12px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    margin-bottom: 12px;
}

.content-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    border-color: #4a6a8a;
}

.item-name {
    color: #f0f0f0;
    font-weight: 500;
    flex: 1;
    text-align: left;
}

.item-detail {
    color: #8ab4e6;
    font-weight: 600;
    white-space: nowrap;
    font-size: 0.95em;
    text-align: right;
}

/* Generic Step-by-Step Container - can be used for instructions, directions, process, etc. */
.step-container {
    float: left;
    width: 100%;
    margin: 15px 0 25px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.step-item {
    display: flex;
    gap: 15px;
    border-bottom: 1px solid #3a5a7a;
    padding: 15px;
    margin: 0 -15px;
    justify-content: center;
    align-items: center;
}

.step-number {
    background: linear-gradient(135deg, #2a9a5a 0%, #1e7a4a 100%);
    color: #f0f0f0;
    font-weight: 700;
    font-size: 1.2em;
    min-width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    border: 2px solid #3a9a6a;
}

.step-text {
    color: #98c3ff;
    line-height: 1.7;
    flex: 1;
    padding-top: 3px;
    text-align: left;
}

/* General lists for other content */
.output-item ul,
.output-item ol {
    text-align: left;
    margin: 10px 0;
    padding-left: 25px;
    color: #98c3ff;
}

.output-item ul li,
.output-item ol li {
    margin: 8px 0;
    line-height: 1.6;
}

.output-item ul li {
    list-style-type: disc;
}

.output-item ol li {
    list-style-type: decimal;
}

.output-item p {
    text-align: left;
    margin: 10px 0;
    line-height: 1.6;
}

/* Poem Text Styling */
.poem-text {
    text-align: left;
    margin: 20px 0;
    padding: 25px 30px;
    background: linear-gradient(135deg, #1a2a4a 0%, #253a5a 100%);
    border-left: 4px solid #4a7a9a;
    border-radius: 8px;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 1.1em;
    line-height: 1.8;
    color: #c8d8ff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    white-space: pre-wrap;
    font-style: italic;
}

@media (max-width: 768px) {
    /* .recipe-summary {
        flex-direction: column;
        flex-wrap: wrap;
        gap: 12px;
    } */

    .recipe-stat {
        min-width: auto;
    }

    .content-grid {
        grid-template-columns: 1fr;
    }

    .step-item {
        padding: 15px;
        margin-bottom: 12px;
    }

    .step-number {
        min-width: 35px;
        height: 35px;
        font-size: 1.1em;
    }

    .content-item {
        margin-bottom: 10px;
    }
}

/* Generator Description */
.generator-description {
    text-align: left;
    margin: 25px auto 35px;
    margin: 0 auto;
    padding: 15px 20px;
    box-sizing: border-box;
    overflow: hidden;
}

.generator-description h3 {
    font-size: 18.5px;
}


.generator-description h3.similar {
    font-size: 18.5px;
    text-align: center;
    margin: 15px 0 0;
}

.generator-description ul li {
    list-style-type: none;
}

.similar-generators-links {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.similar-generators-links a {
    text-decoration: none;
}

/* Description Long - Semantic HTML Styling */
.description-long {
    font-size: 16px;
}

.description-long h2 {
    font-size: 22px;
    color: #f0f0f0;
    margin: 15px 0;
    text-align: center;
}

.description-long h3 {
    font-size: 18px;
    color: #f0f0f0;
    margin: 25px 0 12px 0;
}

/* .description-long h3:first-of-type {
    margin-top: 0;
} */
/* 
.description-long ul {
    margin: 0 0 15px 0;
    padding: 0;
    list-style: none;
}

.description-long ul li {
    margin: 8px 0;
    padding-left: 0;
    color: #b8d4ff;
    line-height: 1.6;
}

.description-long p {
    margin: 12px 0 0 0;
    color: #b8d4ff;
    line-height: 1.6;
}

.description-long p em {
    color: #8fb5ff;
    font-style: italic;
}

.description-long a {
    color: #5b9cff;
    text-decoration: none;
    border-bottom: 1px solid rgba(91, 156, 255, 0.3);
    transition: all 0.2s ease;
}

.description-long a:hover {
    color: #7db4ff;
    border-bottom-color: rgba(125, 180, 255, 0.6);
} */

@media (max-width: 768px) {
    .generator-description {
        margin: 30px auto 15px;
        padding: 15px;
    }

    .description-long h2 {
        font-size: 19px;
    }

    .description-long h3 {
        font-size: 16px;
    }
}

.story-content-text {
    text-align: left;
    margin: 15px 0 0;
}

/* Story continuation container - styled like main prompt */
/* .story-continue-container {
    margin-top: 20px;
}

.story-continue-container label {
    display: block;
    margin-bottom: 10px;
    font-size: 1.1em;
    font-weight: 500;
}

.story-output {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.story-text p {
    color: #e0e0e0;
} */

/* ================================
   Quiz Styles
   ================================ */

.quiz-container {
    margin: 20px 0;
}

.quiz-question {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.question-number {
    color: #8b9dc3;
    font-size: 0.9em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.question-text {
    font-size: 1.1em;
    font-weight: 500;
    color: #e0e0e0;
    margin-bottom: 15px;
    line-height: 1.5;
}

.quiz-answers {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.quiz-answer {
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 12px 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

.quiz-answer:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(139, 157, 195, 0.4);
}

.answer-letter {
    font-weight: 700;
    color: #8b9dc3;
    min-width: 25px;
}

.answer-text {
    color: #d0d0d0;
    flex: 1;
}

.quiz-answer.selected {
    border-width: 2px;
}

.quiz-answer.correct {
    background: rgba(76, 175, 80, 0.1);
    border-color: #4caf50;
}

.quiz-answer.correct .answer-letter,
.quiz-answer.correct .answer-text {
    color: #4caf50;
    font-weight: 600;
}

.quiz-answer.incorrect {
    background: rgba(244, 67, 54, 0.1);
    border-color: #f44336;
}

.quiz-answer.incorrect .answer-letter,
.quiz-answer.incorrect .answer-text {
    color: #f44336;
}

@media screen and (max-width: 768px) {
    .quiz-question {
        padding: 15px;
    }

    .question-text {
        font-size: 1em;
    }

    .quiz-answer {
        padding: 10px 12px;
    }
}

/* ================================
   Podcast Styles
   ================================ */

/* .podcast-output {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 20px;
    margin-bottom: 20px;
}*/

.podcast-title-display {
    margin-bottom: 20px;
    padding: 15px;
    background: rgba(170, 136, 255, 0.1);
    border-radius: 8px;
}

.podcast-title-display h2,
.podcast-title-display h3 {
    margin: 0;
    color: #aa88ff;
    font-size: 1.8em;
}

.podcast-title-display p {
    margin: 10px 0 0 0;
    color: #88aacc;
    font-size: 1.1em;
}

.podcast-text p {
    color: #e0e0e0;
    line-height: 1.6;
}

.podcast-continue-container {
    margin-top: 30px;
}

.podcast-continue-container label {
    display: block;
    margin-bottom: 10px;
    font-size: 1.1em;
    font-weight: 500;
}

/* ================================
   Meme Styles
   ================================ */

.meme-output {
    margin-bottom: 30px;
}

.meme-text-container {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 20px;
    margin: 15px 0;
}

.meme-top-text {
    font-size: 1.2em;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    color: #f0f0f0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.meme-caption {
    font-size: 1.1em;
    color: #e0e0e0;
    text-align: center;
    line-height: 1.6;
    padding: 10px 0;
    font-weight: 500;
}

.meme-bottom-text {
    font-size: 1.2em;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    color: #f0f0f0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    margin-top: 15px;
    letter-spacing: 1px;
}

.meme-meta-container {
    /* background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 15px;
    margin: 15px 0; */
    margin-bottom: 25px;
}

.meme-meta-item {
    color: #b0b0b0;
    font-size: 0.95em;
    line-height: 1.6;
    margin-bottom: 10px;
}

.meme-meta-item:last-child {
    margin-bottom: 0;
}

.meme-meta-item strong {
    color: #f0f0f0;
    font-weight: 600;
    display: inline-block;
    margin-right: 5px;
}

@media screen and (max-width: 768px) {
    .meme-text-container {
        padding: 15px;
    }

    .meme-top-text,
    .meme-bottom-text {
        font-size: 1em;
    }

    .meme-caption {
        font-size: 1em;
    }
}

/* ===== Tattoo Generator Styles ===== */

.tattoo-text-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
}

.tattoo-concept {
    font-size: 1.05em;
    line-height: 1.6;
    padding: 15px;
    border-left: 3px solid #00ff00;
}

.tattoo-concept strong {
    color: #00ff00;
    display: block;
    margin-bottom: 8px;
}

.tattoo-placement {
    font-size: 0.95em;
    padding: 12px;
    border-left: 3px solid #00aaff;
}

.tattoo-placement strong {
    color: #00aaff;
}

.tattoo-info {
    font-size: 0.9em;
    padding: 10px;
    font-style: italic;
}

.tattoo-info strong {
    color: #ccc;
    font-style: normal;
}

@media screen and (max-width: 768px) {
    .tattoo-output {
        padding: 20px;
    }

    .tattoo-concept {
        font-size: 1em;
        padding: 12px;
    }

    .tattoo-placement {
        font-size: 0.9em;
    }
}

/* ===== Feng Shui Generator Styles ===== */
.fengshui-output {
    background: linear-gradient(135deg, #1a2a1a 0%, #2a3a2a 100%);
    border: 2px solid #4a6a4a;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 20px;
}

.fengshui-text-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
}

.fengshui-advice {
    font-size: 1.05em;
    line-height: 1.7;
    color: #e8f5e8;
    padding: 18px;
    background: rgba(100, 200, 100, 0.08);
    border-left: 4px solid #88cc88;
    border-radius: 8px;
}

.fengshui-advice strong {
    color: #88cc88;
    display: block;
    margin-bottom: 10px;
    font-size: 1.1em;
}

.fengshui-info {
    font-size: 0.9em;
    color: #b8d8b8;
    padding: 12px;
    background: rgba(100, 200, 100, 0.05);
    border-radius: 6px;
    border-left: 3px solid #669966;
}

.fengshui-info strong {
    color: #99cc99;
}

@media screen and (max-width: 768px) {
    .fengshui-output {
        padding: 20px;
    }

    .fengshui-advice {
        font-size: 1em;
        padding: 15px;
    }

    .fengshui-info {
        font-size: 0.85em;
    }
}

/* ===== Solution Generator Styles ===== */
.solution-output {
    /* background: linear-gradient(135deg, #1a1a2a 0%, #2a2a3a 100%);
    border: 2px solid #4a4a6a;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 20px; */
}

.solution-summary {
    display: flex;
    gap: 30px;
    margin-bottom: 25px;
    padding: 20px;
    background: rgba(100, 100, 200, 0.08);
    border-left: 4px solid #6a6aaa;
}

.solution-stat {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
}

.solution-stat-label {
    font-size: 0.9em;
    color: #9a9aaa;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.solution-stat-value {
    font-size: 1.3em;
    color: #aaaaff;
    font-weight: 700;
}

.solution-reasoning,
.solution-resources {
    margin-top: 20px;
    padding: 18px;
    background: rgba(100, 100, 200, 0.05);
    /* border-radius: 8px; */
    border-left: 3px solid #7a7acc;
}

.solution-reasoning h3,
.solution-resources h3 {
    color: #8a8aee;
    font-size: 1.1em;
    margin-bottom: 12px;
    font-weight: 600;
}

.solution-reasoning p,
.solution-resources p {
    color: #d0d0e8;
    line-height: 1.7;
    font-size: 1.05em;
}

@media screen and (max-width: 768px) {
    .solution-output {
        padding: 20px;
    }

    .solution-summary {
        flex-direction: column;
        gap: 15px;
        padding: 15px;
    }

    .solution-stat-value {
        font-size: 1.2em;
    }

    .solution-reasoning,
    .solution-resources {
        padding: 15px;
    }
}

/* ===== Achievement Plan Generator Styles ===== */
.achievement-summary {
    display: flex;
    gap: 30px;
    margin-bottom: 25px;
    padding: 20px;
    background: rgba(200, 180, 100, 0.08);
}

.achievement-stat {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
}

.achievement-stat-label {
    font-size: 0.9em;
    color: #aaa89a;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.achievement-stat-value {
    font-size: 1.3em;
    color: #ffdd88;
    font-weight: 700;
}

.achievement-rationale,
.achievement-milestones {
    margin-top: 20px;
    padding: 18px;
    border-left: 3px solid #cc9a7a;
}

.achievement-rationale h3,
.achievement-milestones h3 {
    color: #ee9a8a;
    font-size: 1.1em;
    margin-bottom: 12px;
    font-weight: 600;
}

.achievement-rationale p,
.achievement-milestones p {
    color: #e8e0d0;
    line-height: 1.7;
    font-size: 1.05em;
}

@media screen and (max-width: 768px) {
    .achievement-output {
        padding: 20px;
    }

    .achievement-summary {
        flex-direction: column;
        gap: 15px;
        padding: 15px;
    }

    .achievement-stat-value {
        font-size: 1.2em;
    }

    .achievement-rationale,
    .achievement-milestones {
        padding: 15px;
    }
}

/* ===== Achievement Plan Progress Tracking Styles ===== */
.achievement-goal-header {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 2px solid #6a6a4a;
}

.achievement-goal-header h2 {
    color: #ffdd88;
    font-size: 1.5em;
    margin: 15px 0 25px;
}

.achievement-progress-bar {
    width: 100%;
    height: 30px;
    background: rgba(200, 180, 100, 0.1);
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 10px;
}

.achievement-progress-bar .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #88cc88 0%, #ffdd88 100%);
    transition: width 0.5s ease;
    border-radius: 15px;
}

.progress-text {
    text-align: center;
    color: #aaa89a;
    font-size: 0.95em;
    font-weight: 600;
}

.interactive-steps .step-item {
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.interactive-steps .step-item:hover {
    background: rgba(200, 180, 100, 0.08);
    transform: translateX(5px);
}

.interactive-steps .step-item.completed {
    opacity: 0.6;
}

.step-checkbox {
    flex-shrink: 0;
    padding-top: 5px;
}

.step-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #88cc88;
}

.step-text.strikethrough {
    text-decoration: line-through;
    color: #888;
}

.clickable-step {
    user-select: none;
}

@media screen and (max-width: 768px) {
    .achievement-goal-header h2 {
        font-size: 1.2em;
    }

    .achievement-progress-bar {
        height: 25px;
    }

    .interactive-steps .step-item {
        gap: 10px;
    }

    .step-checkbox input[type="checkbox"] {
        width: 18px;
        height: 18px;
    }
}

.action-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 12px;
    margin-bottom: 10px;
    background: rgba(200, 150, 255, 0.08);
    border-radius: 8px;
    transition: transform 0.2s ease;
}

.action-item:hover {
    transform: translateX(5px);
}

.action-number {
    background: linear-gradient(135deg, #aa88ff 0%, #cc99ff 100%);
    color: #1a1a1a;
    font-weight: 700;
    font-size: 1.1em;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.action-text {
    color: #e8d8f8;
    line-height: 1.6;
    font-size: 1.05em;
}

.motivation-quotes {
    margin-top: 20px;
    padding: 18px;
    background: rgba(150, 100, 200, 0.06);
    border-radius: 8px;
}

.motivation-quotes h3 {
    color: #ddaaff;
    font-size: 1.1em;
    margin-bottom: 15px;
    font-weight: 600;
}

.motivation-quote {
    border-left: 4px solid #aa88ff;
    padding: 15px 20px;
    margin: 15px 0;
    background: rgba(200, 150, 255, 0.1);
    border-radius: 6px;
    font-style: italic;
    color: #e8d8f8;
    line-height: 1.7;
}

@media screen and (max-width: 768px) {
    .action-item {
        gap: 12px;
    }

    .action-number {
        width: 30px;
        height: 30px;
        font-size: 1em;
    }
}

/* ===== Error Message Styles (for Solution, Achievement, Motivation) ===== */
.error-message {
    background: linear-gradient(135deg, #3a2a2a 0%, #4a3a3a 100%);
    border: 2px solid #8a5a5a;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 20px;
}

.no-solution-message {
    padding: 20px;
    background: rgba(200, 100, 100, 0.1);
    border-left: 4px solid #cc8888;
    border-radius: 8px;
}

.no-solution-message h3 {
    color: #ffaa88;
    font-size: 1.2em;
    margin-bottom: 15px;
    font-weight: 600;
}

.no-solution-message p {
    color: #e8d8d8;
    line-height: 1.7;
    font-size: 1.05em;
    margin-bottom: 12px;
}

.no-solution-message ul {
    list-style: none;
    padding-left: 0;
    margin: 15px 0;
}

.no-solution-message li {
    color: #d8c8c8;
    line-height: 1.6;
    padding: 8px 0;
    padding-left: 25px;
    position: relative;
}

.no-solution-message li:before {
    content: "•";
    position: absolute;
    left: 5px;
    color: #cc8888;
    font-weight: bold;
    font-size: 1.2em;
}

@media screen and (max-width: 768px) {
    .error-message {
        padding: 20px;
    }

    .no-solution-message {
        padding: 15px;
    }

    .no-solution-message h3 {
        font-size: 1.1em;
    }
}

/* ===== Inline Error Message (for continuation generators) ===== */
.error-message-inline {
    background: rgba(255, 100, 100, 0.1);
    border-left: 4px solid #cc8888;
    border-radius: 8px;
    padding: 15px;
    margin-top: 10px;
    margin-bottom: 10px;
    color: #ffaa88;
}

.error-message-inline strong {
    color: #ff8888;
    display: block;
    margin-bottom: 5px;
}

/* ===== Creations Browser Styles ===== */
.creations-grid {
    /* display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin: 30px 0; */
    margin-top: 30px;
}

.creation-type-card {
    position: relative;
    border-radius: 4px;
    gap: 10px;
    border: 1px solid #223552;
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden;
    background-color: #0b1521;
    text-decoration: none;
    display: flex;
    align-items: center;
}

.creation-emoji {
    font-size: 2.5em;
    line-height: 1;
    flex-shrink: 0;
}

.creation-info {
    flex: 1;
}

.creation-info h3 {
    margin: 0;
    color: #e8e8f8;
    font-size: 1.2em;
    text-align: left;
}

.creation-count {
    margin: 0;
    color: #88aacc;
    font-size: 0.95em;
    text-align: left;
}

.creation-arrow {
    font-size: 1.5em;
    color: #6a6a8a;
    transition: transform 0.3s ease;
}

.creation-type-card:hover .creation-arrow {
    transform: translateX(5px);
    color: #8a8aaa;
}

/* ===== Individual Generator Creations List ===== */
.generator-creations-header {
    margin-bottom: 30px;
}

.back-link {
    display: inline-block;
    color: #88aacc;
    text-decoration: none;
    margin-bottom: 15px;
    font-size: 1em;
    transition: color 0.3s ease;
}

.back-link:hover {
    color: #aaccee;
}

.generator-creations-header h1 {
    margin: 10px 0;
}

.creation-count-text {
    color: #88aacc;
    font-size: 1.1em;
    margin: 5px 0;
}

.creations-list {
    display: grid;
    gap: 25px;
    margin: 20px 0;
}

.story-nav-container {
    display: flex;
    justify-content: space-between;
    margin: 25px 0;
}

.story-nav-container a {
    text-decoration: none;
}

.creation-item {
    position: relative;
    border-radius: 4px;
    border: 1px solid #19304d;
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden;
    background-color: #0b1521;
    /* transition: all 0.3s ease; */
}

.generator-browse .creation-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.creation-item:hover {
    /* scale: 1.01; */
}

.creation-item-header {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 10px;
}

.creation-item-header div {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.creation-item-header a,
.creation-meta a {
    text-decoration: none;
}

.creation-date {
    font-size: 0.9em;
}

.translation-note-card,
.creation-prompt,
.notes-card {
    line-height: 1.6;
    margin: 15px 0;
    text-align: left;
    float: left;
    width: 100%;
    padding: 10px 12px;
    box-sizing: border-box;
    background: #122732;
    border: 1px solid #2c4767;
    border-left: 3px solid #6afcff;
    color: #cfe8ff;
    border-radius: 6px;
}

.creation-prompt,
blockquote {
    border-radius: 6px;
}

.creation-item .creation-prompt {
    margin-bottom: 0;
}

.creation-image img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.creation-prompt strong {
    color: #6afcff;
    font-weight: normal;
    font-family: 'Roboto', sans-serif;
    margin-right: 6px;
}

.creation-item-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    float: left;
    margin: 15px 0 0;
    margin: 0;
    width: 100%;
}

.creations-list .creation-item-footer {
    margin-top: 15px;
}

.creation-stats {
    display: flex;
    gap: 15px;
    align-items: center;
}

/* .translation-note-card {
    margin: 15px 0;
    padding: 12px;
    border-left: 3px solid #6afcff;
    background: rgba(106, 252, 255, 0.08);
} */
/* 
.stat-item {
    color: #88aacc;
    font-size: 0.9em;
    display: inline-flex;
    align-items: center;
    gap: 5px;
} */

.error-badge {
    color: #ff8888;
    font-weight: 600;
}

.view-creation-btn {
    white-space: nowrap;
}

/* ===== Responsive Design for Creations Browser ===== */
@media screen and (max-width: 768px) {
    .creations-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .creation-type-card {
        padding: 15px;
    }

    .creation-emoji {
        font-size: 2em;
    }

    .creation-info h3 {
        font-size: 1.1em;
    }

    .creation-item {
        padding: 15px;
    }

    .creation-item-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .view-creation-btn {
        width: 100%;
        text-align: center;
    }
}

#save-story-context-btn {
    margin-top: 15px;
}

.story-header-container a {
    text-decoration: none;
}

/* ===== Image Upscale Generator Styles ===== */
.image-upload-container {
    display: flex;
    align-items: center;
    margin: 15px 0;
    justify-content: center;
    flex-direction: column;
    gap: 15px;
    float: left;
    width: 100%;
}

/* #file-name-display {
    margin-left: 10px;
    color: #88aacc;
    font-size: 0.95em;
} */

@media screen and (max-width: 768px) {
    .image-upload-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    /* #file-name-display {
        margin-left: 0;
    } */
}

/* ===== Summary Generator Styles ===== */
/* .text-area-input {
    width: 100%;
    padding: 15px;
    border: 2px solid #4a4a6a;
    background: #2a2a3a;
    color: #e8e8f8;
    border-radius: 8px;
    font-size: 1em;
    font-family: inherit;
    line-height: 1.6;
    resize: vertical;
    min-height: 150px;
    margin-bottom: 15px;
}

.text-area-input:focus {
    outline: none;
    border-color: #6a6a8a;
    box-shadow: 0 0 0 3px rgba(106, 106, 138, 0.1);
} */

/* .text-area-input::placeholder {
    color: #6a6a8a;
}

@media screen and (max-width: 768px) {
    .text-area-input {
        padding: 12px;
        font-size: 0.95em;
    }
} */

/* Single Creation View */
/* .single-creation-nav {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    padding: 15px;
    background: rgba(106, 106, 138, 0.1);
    border-radius: 8px;
    gap: 20px;
}

.single-creation-nav .nav-link {
    color: #98c3ff;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.single-creation-nav .nav-link:hover {
    background-color: rgba(106, 106, 138, 0.2);
}

.single-creation-header {
    margin: 5px 0 15px;
    text-align: center;
}

.single-creation-header h1 {
    margin-bottom: 15px;
} */

.privacy-badge {
    display: inline-block;
    margin-left: 10px;
    padding: 4px 8px;
    color: #98c3ff;
}

.privacy-badge.clickable {
    cursor: pointer;
    /* transition: all 0.2s ease; */
}

/* 
.privacy-badge.clickable:hover {
    background: rgba(106, 252, 255, 0.3);
    transform: scale(1.05);
} */

/* .single-creation-header .creation-privacy-control {
    margin: 15px 0;
}

.single-creation-header .creation-privacy-control button {
    padding: 8px 20px;
    font-size: 0.9em;
} */

.generator-single .creation-prompt-display {
    width: fit-content;
    max-width: 100%;
    margin: 25px auto 0;
    position: relative;
    border-radius: 4px;
    border: 1px solid #19304d;
    padding: 10px 15px;
    box-sizing: border-box;
    overflow: hidden;
    background-color: #0b1521;
    display: inline-block;
    text-align: left;
}

.single-creation-output {
    width: 750px;
    max-width: 100%;
    margin-top: 15px;
    border-radius: 4px;
    border: 1px solid #19304d;
    padding: 15px;
    box-sizing: border-box;
    overflow: hidden;
    background-color: #0b1521;
    text-align: left;
}

.single-creation-footer {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 40px 0;
    padding: 20px;
    border-top: 1px solid rgba(106, 106, 138, 0.2);
}

@media screen and (max-width: 768px) {
    .single-creation-nav {
        flex-direction: column;
        gap: 10px;
    }

    .single-creation-footer {
        flex-direction: column;
    }
}

.creation-content h4 {
    float: left;
    width: 100%;
}

/* Recipe-specific styling */
.recipe-summary {
    float: left;
    width: 100%;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
    float: left;
    margin: 5px 0 25px;
}

.recipe-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.recipe-stat-label {
    font-size: 0.85em;
    color: #f0f0f0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.recipe-stat-value {
    font-size: 1.1em;
    color: #ffc788;
}

/* Recipe browse preview - max height with fading overlay */
.recipe-content.browse-preview {
    position: relative;
    max-height: 600px;
    overflow: hidden;
}

.recipe-content.browse-preview .browse-fade-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 150px;
    background: linear-gradient(to bottom, transparent 0%, rgba(15, 25, 35, 0.8) 50%, rgba(15, 25, 35, 1) 100%);
    pointer-events: none;
}

.single-creation-output h3 {
    margin: 15px 0;
    margin: 0;
}

.single-creation-output h4 {
    margin-top: 30px;
    margin-bottom: 10px;
    font-size: 1.1em;
}

/* @media screen and (max-width: 768px) {
    .recipe-summary {
        flex-direction: column;
        gap: 15px;
    }
} */

/* Username output styling */
.username-output {
    text-align: center;
    padding: 40px 20px;
}

.username-output h2 {
    font-size: 2.5em;
    color: #98c3ff;
    font-weight: 700;
    letter-spacing: 2px;
    margin: 0;
}

/* Babyname output styling */
.babyname-output {
    text-align: center;
    padding: 30px 20px;
}

.babyname-output h2 {
    font-size: 2.2em;
    color: #98c3ff;
    font-weight: 600;
    margin-bottom: 20px;
}

.babyname-description {
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.7;
    color: #c4c4db;
    text-align: left;
}

/* Joke output styling */
/* .joke-output {
    padding: 30px;
    background: linear-gradient(135deg, rgba(106, 106, 138, 0.1) 0%, rgba(106, 106, 138, 0.05) 100%);
    border-radius: 12px;
    border-left: 4px solid #98c3ff;
}

.joke-output p {
    font-size: 1.1em;
    line-height: 1.7;
    color: #c4c4db;
    margin: 0;
} */

/* Quote output styling */
.quote-output {
    padding: 40px;
    text-align: center;
}

.quote-output blockquote {
    font-size: 1.3em;
    line-height: 1.7;
}

@media screen and (max-width: 768px) {
    .username-output h2 {
        font-size: 2em;
    }

    .babyname-output h2 {
        font-size: 1.8em;
    }

    .quote-output blockquote {
        font-size: 1.1em;
        padding: 15px;
    }
}

/* Video container styles */
.video-container {
    margin: 20px 0;
    padding: 15px;
    background: rgba(20, 30, 50, 0.6);
    border-radius: 12px;
    border: 1px solid rgba(136, 170, 204, 0.2);
}

.video-container video {
    max-height: 100vh;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}

.video-footer {
    margin-top: 10px;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.video-footer .download-btn {
    padding: 8px 16px;
    background: rgba(20, 80, 140, 0.7);
    border: 1px solid rgba(136, 170, 204, 0.3);
    color: #98c3ff;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.2s;
}

.video-footer .download-btn:hover {
    background: rgba(30, 100, 170, 0.8);
    border-color: rgba(152, 195, 255, 0.5);
}

.video-size-text {
    font-size: 0.85em;
    opacity: 0.8;
    margin-left: 5px;
}

#video-image-upload-preview {
    display: none;
    margin-top: 10px;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

#video-uploaded-image-preview {
    width: 300px;
    height: auto;
    max-width: 100%;
}

#video-file-name-display {
    margin-left: 0;
    color: #88aacc;
    font-size: 0.9em;
}

#image-preview img {
    width: 100%;
    height: auto;
}

/* Generator Navigation Buttons */
.generator-navigation {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 10px 0;
    flex-wrap: wrap;
}

.generator-single .generator-navigation {
    margin-bottom: 35px;
}

.gen-nav-btn {
    display: inline-flex;
    padding: 8px 16px;
    align-items: center;
    color: #98c3ff;
    text-decoration: none;
    /* font-size: 15px; */
    transition: all 0.5s ease;
    cursor: pointer;
    box-sizing: border-box;
}

.gen-nav-btn:hover {
    background: #182840;
}

.gen-nav-btn.active {
    background-color: #132232;
}

.gen-nav-btn .nav-icon {
    font-size: 1.1em;
}

.creation-username {
    color: #88aacc;
    font-size: 0.9em;
    font-style: italic;
}

.prompt-reference-box {
    background: #122732;
    border: 1px solid #304f78;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
}

/* @media (max-width: 768px) {
    .gen-nav-btn .nav-text {
        display: none;
    }

    .active .nav-text {
        display: block;
    } went all in on this below
} */

.gen-nav-btn .nav-text {
    visibility: hidden;
    max-width: 0;
    overflow: hidden;
    margin-left: 0;
    transition: all 0.5s ease;
}

.active .nav-text

/* ,.gen-nav-btn:hover .nav-text  */
    {
    visibility: visible;
    max-width: 225px;
    margin-left: 8px;
}

.character-preview {
    text-align: left;
    line-height: 1.6;
    font-size: 1em;
}

.character-preview ul {
    list-style-type: none;
}

/* Video Meta Info on Creations List */
.video-meta-info {
    float: left;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
    padding: 10px 0;
    background: rgba(20, 30, 50, 0.4);
}

.video-meta-info .meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(30, 50, 80, 0.5);
    border: 1px solid rgba(136, 170, 204, 0.2);
    border-radius: 4px;
    color: #98c3ff;
    font-size: 0.88em;
    white-space: nowrap;
}

.video-meta-info .meta-item:hover {
    background: rgba(30, 50, 80, 0.7);
    border-color: rgba(152, 195, 255, 0.4);
}

@media (max-width: 768px) {
    .video-meta-info {
        gap: 6px;
    }

    .video-meta-info .meta-item {
        font-size: 0.82em;
        padding: 3px 8px;
    }
}

/* Generic Creation Meta Info (for all generators) */
.creation-item-card {
    float: left;
    width: 100%;
    margin-bottom: 20px;
    padding: 20px 20px 0;
    box-sizing: border-box;
    background: rgba(72, 101, 139, 0.1);
    border: 1px solid rgba(106, 252, 255, 0.2);
    border-radius: 10px;
}

.creation-actions {
    float: left;
    width: 100%;
    margin: 20px 0;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.creation-meta-info {
    float: left;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
    margin: 15px 0;
    /* padding: 12px; */
}

.creation-meta-info .meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 4px;
    color: #98c3ff;
    font-size: 0.88em;
    white-space: nowrap;
}

/* .creation-meta-info .meta-item:hover,
.read-more-btn:hover {
    background: rgba(30, 50, 80, 0.7);
    border-color: rgba(152, 195, 255, 0.4);
} */

.creation-meta-info .meta-item,
.read-more-btn {
    background: #142338;
    border: 1px solid #2c4767;
}

@media (max-width: 768px) {
    .creation-meta-info {
        gap: 6px;
    }

    .creation-meta-info .meta-item {
        font-size: 0.82em;
        padding: 3px 8px;
    }
}

/* Logo Display Styles */
.logo-display-container {
    text-align: center;
}

.logo-image-wrapper {
    margin: 20px 0;
    padding: 20px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    display: inline-block;
}

.logo-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.logo-description-section {
    text-align: left;
    margin: 25px 0;
    padding: 20px;
    background: rgba(72, 101, 139, 0.1);
    border-left: 4px solid #6afcff;
    border-radius: 8px;
}

.logo-description-title {
    color: #6afcff;
    font-size: 1.2em;
    margin-bottom: 12px;
}

.logo-description-text {
    color: #e0e0e0;
    font-size: 1.05em;
    line-height: 1.6;
}

.logo-action-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 20px 0;
}

/* Action buttons for single creation pages (e.g., Generate Speech from Poem) */
.action-buttons {
    margin: 20px 0;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.action-buttons a.action-button {
    display: inline-block;
    padding: 12px 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.action-buttons a.action-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

.action-buttons a.action-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

/* Generator action links - global style for action links across generators */
.generator-action-links,
.similar-generators-links {
    float: left;
    width: 100%;
    margin: 25px 0 15px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 16px;
}

.similar-generators-links a,
.generator-action-links .action-link-btn,
.generator-action-links a,
.generator-action-links .default-btn,
.generator-action-links .button,
.generator-action-links button,
.privacy-badge,
.view-creation-btn,
a.action-link-btn,
.gen-nav-btn {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 6px;
    text-decoration: none;
    height: unset;
    transition: all 0.2s ease;
}

.similar-generators-links a:hover,
.generator-action-links .action-link-btn:hover,
.generator-action-links a:hover,
.privacy-badge:hover,
.generator-action-links .default-btn:hover,
.generator-action-links .button:hover,
.generator-action-links button:hover,
.view-creation-btn:hover,
a.action-link-btn:hover,
.gen-nav-btn:hover {
    transform: translateY(-1px);
    background-color: #182840;
}

.generator-action-links .action-link-btn:active,
a.action-link-btn:active {
    transform: translateY(0);
    background: rgba(255, 255, 255, 0.03);
}

.privacy-badge:hover {
    color: #f0f0f0;
}

a.default-btn,
.share-box a {
    text-decoration: none;
}

/* Quiz Print Buttons */
.quiz-print-buttons {
    margin-top: 20px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.quiz-print-btn {
    padding: 10px 20px;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: opacity 0.2s, transform 0.1s;
}

.quiz-print-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.quiz-print-btn:active {
    transform: translateY(0);
}

@media print {
    .quiz-print-buttons {
        display: none !important;
    }
}

/* ===================================
   Model Preferences Page
   =================================== */
#models-wrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 30px 20px;
}

#models-wrap h1 {
    font-size: 32px;
    font-weight: 600;
    color: #f0f0f0;
    margin: 0 0 15px 0;
    text-align: center;
}

.models-intro {
    text-align: center;
    color: #b8d4ff;
    font-size: 16px;
    margin: 0 0 30px 0;
    line-height: 1.6;
}

.models-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: center;
    margin: 0 0 30px 0;
    flex-wrap: wrap;
}

.models-actions-bottom {
    margin: 40px 0 0 0;
}

.save-status {
    text-align: center;
    margin: 0 0 20px 0;
    padding: 12px;
    border-radius: 8px;
    font-weight: 500;
    display: none;
}

.save-status.success {
    background: rgba(76, 175, 80, 0.15);
    color: #4caf50;
    border: 1px solid rgba(76, 175, 80, 0.3);
    display: block;
}

.save-status.error {
    background: rgba(244, 67, 54, 0.15);
    color: #f44336;
    border: 1px solid rgba(244, 67, 54, 0.3);
    display: block;
}

.models-categories {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.model-category {
    background: rgba(72, 101, 139, 0.15);
    border: 1px solid rgba(91, 156, 255, 0.2);
    border-radius: 12px;
    padding: 25px;
}

.model-category h2 {
    font-size: 24px;
    font-weight: 600;
    color: #f0f0f0;
    margin: 0 0 8px 0;
}

.category-description {
    color: #b8d4ff;
    font-size: 14px;
    margin: 0 0 20px 0;
    opacity: 0.8;
}

.model-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
}

.model-item {
    padding: 14px 16px 14px 45px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    position: relative;
    min-height: 60px;
}

.model-item .checkmark {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
}

.model-item .model-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 10px 15px;
    box-sizing: border-box;
}

.model-item .model-name {
    font-weight: 500;
    color: #f0f0f0;
    font-size: 15px;
    line-height: 1.3;
}

.model-item .model-meta {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.model-item .model-cost {
    color: #6afcff;
    font-size: 13px;
    font-weight: 500;
}

.model-item .model-provider,
.model-item .model-details {
    color: #8ba9ca;
    font-size: 12px;
}

.model-item:hover {
    background: rgba(72, 101, 139, 0.25);
    border-color: rgba(91, 156, 255, 0.4);
    transform: translateY(-1px);
}

.model-item input[type="checkbox"]:checked~.checkmark {
    background-color: #6afcff;
    border-color: #6afcff;
}

.model-item input[type="checkbox"]:checked~.model-content .model-name {
    color: #f0f0f0;
}

.model-item input[type="checkbox"]:not(:checked)~.model-content .model-name {
    color: #8ba9ca;
    opacity: 0.6;
}

.model-item input[type="checkbox"]:not(:checked)~.model-content .model-cost,
.model-item input[type="checkbox"]:not(:checked)~.model-content .model-provider,
.model-item input[type="checkbox"]:not(:checked)~.model-content .model-details {
    opacity: 0.5;
}

.secondary-btn {
    background: rgba(72, 101, 139, 0.3);
    color: #b8d4ff;
    border: 1px solid rgba(91, 156, 255, 0.3);
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.secondary-btn:hover {
    background: rgba(72, 101, 139, 0.5);
    border-color: rgba(91, 156, 255, 0.5);
    color: #f0f0f0;
}

/* Admin dashboard specific styles */
.admin-stats {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 0 40px 0;
    padding: 25px;
    background: rgba(72, 101, 139, 0.15);
    border: 1px solid rgba(91, 156, 255, 0.2);
    border-radius: 12px;
}

.admin-stats .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.admin-stats .stat-item strong {
    font-size: 28px;
    color: #6afcff;
    font-weight: 600;
}

.admin-stats .stat-item span {
    font-size: 13px;
    color: #b8d4ff;
    text-align: center;
}

.model-item.admin-view {
    cursor: pointer;
    opacity: 1;
}

.model-item.admin-view:hover {
    transform: translateY(-2px);
}

.model-item.admin-view input[type="checkbox"] {
    cursor: pointer;
}

.model-visibility {
    color: #6afcff !important;
    font-weight: 500 !important;
    font-size: 12px !important;
}

.admin-note {
    margin: 30px 0 0 0;
    padding: 20px;
    background: rgba(106, 252, 255, 0.1);
    border: 1px solid rgba(106, 252, 255, 0.3);
    border-radius: 8px;
    color: #b8d4ff;
    line-height: 1.6;
}

.admin-note strong {
    color: #6afcff;
}

.admin-note a {
    color: #6afcff;
    text-decoration: none;
    border-bottom: 1px solid rgba(106, 252, 255, 0.3);
}

.admin-note a:hover {
    border-bottom-color: #6afcff;
}

@media (max-width: 768px) {
    #models-wrap {
        padding: 20px 15px;
    }

    .model-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    #models-wrap h1 {
        font-size: 28px;
        margin: 0 0 20px 0;
    }

    .models-intro {
        font-size: 16px;
        margin: 0 0 25px 0;
        padding: 0 5px;
    }

    .model-category {
        padding: 20px 15px;
    }

    .model-category h2 {
        font-size: 22px;
        margin: 0 0 10px 0;
    }

    .category-description {
        font-size: 15px;
        margin: 0 0 18px 0;
    }

    .model-item {
        padding: 18px 18px 18px 50px;
        min-height: 70px;
        border-width: 2px;
    }

    .model-item .checkmark {
        left: 18px;
        width: 22px;
        height: 22px;
        top: 50%;
    }

    .model-item .model-content {
        gap: 6px;
    }

    .model-item .model-name {
        font-size: 17px;
        line-height: 1.4;
    }

    .model-item .model-meta {
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 2px;
    }

    .model-item .model-cost {
        font-size: 15px;
    }

    .model-item .model-provider,
    .model-item .model-details {
        font-size: 13px;
    }

    .models-actions {
        flex-direction: column;
        width: 100%;
        gap: 12px;
        margin: 0 0 25px 0;
    }

    .models-actions button {
        width: 100%;
        padding: 12px 20px;
        font-size: 15px;
    }

    .save-status {
        font-size: 15px;
        padding: 14px;
    }

    .admin-stats {
        gap: 15px;
        padding: 20px 15px;
        margin: 0 0 30px 0;
    }

    .admin-stats .stat-item strong {
        font-size: 26px;
    }

    .admin-stats .stat-item span {
        font-size: 14px;
    }

    .model-visibility {
        font-size: 13px !important;
    }

    .admin-note {
        padding: 18px;
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    #models-wrap {
        padding: 15px 10px;
    }

    #models-wrap h1 {
        font-size: 24px;
    }

    .model-category {
        padding: 18px 12px;
    }

    .model-category h2 {
        font-size: 20px;
    }

    .model-item {
        padding: 16px 16px 16px 48px;
        min-height: 65px;
    }

    .model-item .model-name {
        font-size: 16px;
    }

    .model-item .model-cost {
        font-size: 14px;
    }

    .model-item .model-provider,
    .model-item .model-details {
        font-size: 12px;
    }
}

.creation-video-prompt,
.creation-video-source {
    margin: -5px 0 12px;
    padding: 10px 12px;
    background: rgba(138, 136, 219, 0.08);
    border-left: 3px solid #8a88db;
    border-radius: 6px;
    color: #d9dcff;
    font-size: 0.95em;
    line-height: 1.5;
}

.creation-video-prompt strong,
.creation-video-source strong {
    color: #a6a4ff;
    font-weight: 600;
    margin-right: 6px;
}

.creation-video-source a {
    color: #6afcff;
    text-decoration: underline;
}

.creation-video-source a:hover {
    color: #d0feff;
}

/* Business Plan Display Styles */
.businessplan-single-display {
    text-align: left;
    max-width: 1200px;
    margin: 0 auto;
}

.businessplan-prompt {
    background: rgba(255, 255, 255, 0.05);
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 30px;
    border-left: 4px solid #6afcff;
}

.businessplan-prompt p {
    margin: 0;
    color: #e0e0e0;
}

.businessplan-prompt strong {
    color: #6afcff;
    margin-right: 8px;
}

.business-plan-section {
    margin-bottom: 35px;
    padding: 25px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    border: 1px solid rgba(106, 252, 255, 0.1);
    transition: all 0.3s ease;
}

.business-plan-section:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(106, 252, 255, 0.2);
}

.business-plan-section-title {
    color: #6afcff;
    font-size: 1.5em;
    font-weight: 600;
    margin: 0 0 20px 0;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(106, 252, 255, 0.3);
}

.business-plan-section-content {
    color: #e0e0e0;
    line-height: 1.8;
    font-size: 1.05em;
}

.business-plan-list {
    margin: 15px 0;
    padding-left: 25px;
    list-style-type: disc;
}

.business-plan-list li {
    margin-bottom: 10px;
    color: #e0e0e0;
    line-height: 1.6;
}

.business-plan-list ul {
    margin-top: 10px;
    padding-left: 25px;
    list-style-type: circle;
}

.business-plan-subsection {
    margin: 15px 0;
    padding: 12px 0;
}

.business-plan-label {
    color: #88aacc;
    font-weight: 600;
    display: inline-block;
    margin-right: 8px;
}

.business-plan-value {
    color: #e0e0e0;
}

.businessplan-text {
    color: #e0e0e0;
    line-height: 1.8;
    font-size: 1.05em;
    padding: 20px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    margin-bottom: 20px;
}

/* Business Plan Output Item (for generator page) */
.businessplan-output {
    text-align: left;
}

.businessplan-output .business-plan-section {
    margin-bottom: 25px;
}

.businessplan-output .business-plan-section-title {
    font-size: 1.3em;
}

/* Responsive adjustments for business plans */
@media (max-width: 768px) {
    .business-plan-section {
        padding: 18px;
    }

    .business-plan-section-title {
        font-size: 1.3em;
    }

    .business-plan-section-content {
        font-size: 1em;
    }

    .business-plan-list {
        padding-left: 20px;
    }
}

.story-image-container img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.prompt {
    font-size: 14px;
    color: #98c3ff;
}

/* ============================================
   CUSTOM AUDIO PLAYER
   ============================================ */
.speech-audio-placeholder {
    width: 100%;
}

.custom-audio-player {
    width: 100%;
    background-color: #0b1521;
    border-radius: 4px;
    box-sizing: border-box;
}

.audio-controls-wrapper {
    margin: 15px 0;
    padding: 0 4px;
    width: 100%;
    display: grid;
    grid-template-columns: 40px 1fr 90px 100px 40px;
    grid-template-rows: auto;
    gap: 15px;
    align-items: center;
}

/* Play/Pause Button */
.audio-play-pause-btn {
    width: 40px;
    height: 40px;
    background-color: #6afcff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.audio-play-pause-btn:hover {
    transform: scale(1.1);
    /* box-shadow: 0 4px 12px rgba(106, 252, 255, 0.5); */
}

.audio-play-pause-btn:active {
    transform: scale(0.95);
}

.audio-play-pause-btn .play-icon,
.audio-play-pause-btn .pause-icon {
    color: #000;
    line-height: 1;
    display: block;
}

/* Progress Bar */
.audio-progress-container {
    grid-column: 2 / 3;
    position: relative;
}

.audio-progress-bar {
    width: 100%;
    height: 8px;
    background-color: #0d1520;
    border-radius: 4px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    border: 1px solid #223552;
}

.audio-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #6afcff 0%, #58d4d6 100%);
    border-radius: 4px;
    width: 0%;
    transition: width 0.1s linear;
    position: relative;
}

.audio-progress-handle {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    background: #ffdd33;
    border: 2px solid #0b1521;
    border-radius: 50%;
    cursor: pointer;
    transition: left 0.1s linear;
}

.audio-progress-bar:hover .audio-progress-handle {
    width: 18px;
    height: 18px;
}

/* Time Display */
.audio-time-display {
    grid-column: 3 / 4;
    color: #f0f0f0;
    font-size: 13px;
    text-align: center;
    font-family: 'Courier New', monospace;
    white-space: nowrap;
}

.audio-time-display .current-time {
    color: #6afcff;
}

/* Volume Control */
.audio-volume-control {
    grid-column: 4 / 5;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

.audio-volume-btn,
.download-audio-btn {
    width: 32px;
    height: 32px;
    background-color: transparent;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.audio-volume-btn:hover,
.download-audio-btn:hover {
    background-color: rgba(106, 252, 255, 0.1);
}

.audio-volume-slider-container {
    flex: 1;
}

.audio-volume-slider {
    padding: 2px 0;
    width: 100%;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: #0d1520;
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.audio-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    background: #6afcff;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.audio-volume-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.audio-volume-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: #6afcff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.audio-volume-slider::-moz-range-thumb:hover {
    transform: scale(1.2);
}

/* Download Button */
.audio-download-btn {
    width: 32px;
    height: 32px;
    background-color: transparent;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: background-color 0.2s ease;
}

.audio-download-btn:hover {
    background-color: rgba(106, 252, 255, 0.1);
}

.audio-download-btn:active {
    transform: translateY(0);
}

/* Loading and Error States */
.custom-audio-player.loading,
.custom-audio-player.audio-error {
    padding: 15px 20px;
    text-align: center;
}

.audio-loading-message {
    color: #6afcff;
    font-style: italic;
    font-size: 14px;
}

.audio-error-message {
    color: #ff6b6b;
    font-size: 14px;
}

/* Responsive Design */
@media (max-width: 600px) {
    .audio-controls-wrapper {
        gap: 5px;
    }

    /* .audio-controls-wrapper {
        grid-template-columns: 40px 1fr 40px;
        grid-template-rows: auto auto;
        gap: 12px;
    }

    .audio-play-pause-btn {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }

    .audio-progress-container {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }

    .audio-download-btn {
        grid-column: 3 / 4;
        grid-row: 1 / 2;
    }

    .audio-time-display {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        text-align: left;
        font-size: 12px;
    }

    .audio-volume-control {
        grid-column: 2 / 4;
        grid-row: 2 / 3;
        justify-content: flex-end;
    } */
}

/* ============================================
   VOICE TOGGLE SLIDER
   ============================================ */

.voice-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
    height: 35px;
}

.voice-toggle-slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked+.voice-toggle-slider {
    background-color: #4CAF50;
}

input:focus+.voice-toggle-slider {
    box-shadow: 0 0 1px #4CAF50;
}

input:checked+.voice-toggle-slider:before {
    transform: translateX(26px);
}

.voice-toggle-switch input:disabled+.voice-toggle-slider {
    opacity: 0.6;
    cursor: not-allowed;
}

.voice-toggle-container {
    margin-top: 20px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    transition: background 0.2s ease;
}

.voice-toggle-container:hover {
    background: rgba(0, 0, 0, 0.3);
}

.voice-toggle-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.voice-toggle-text h4 {
    color: #f0f0f0;
    font-size: 16px;
    margin: 0 0 5px 0;
}

.voice-toggle-text p {
    margin: 0;
    color: #88aacc;
    font-size: 13px;
}

.voice-toggle-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.voice-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.voice-toggle-status {
    display: block;
    margin-top: 10px;
    color: #6afcff;
    font-size: 13px;
}

/* ============================================
   VOICE INFO DISPLAY
   ============================================ */

.voice-info-display {
    float: left;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 15px;
    background: rgba(106, 252, 255, 0.08);
    border-radius: 8px;
}

.voice-name-edit {
    margin-bottom: 15px;
}

.voice-name-edit label {
    display: block;
    margin-bottom: 5px;
    color: #6afcff;
    font-weight: bold;
}

.voice-name-edit input {
    width: 100%;
    padding: 10px;
    background: #2a4159;
    border: 1px solid #223552;
    border-radius: 4px;
    color: #88aacc;
    font-size: 16px;
}

.voice-name-save-btn {
    margin-top: 8px;
    padding: 8px 16px;
    background: #4CAF50;
    border: none;
    border-radius: 4px;
    color: white;
    cursor: pointer;
}

.voice-name-save-btn:hover {
    background: #45a049;
}

.voice-name-save-status {
    margin-left: 10px;
    color: #6afcff;
    display: none;
}

.voice-info-display h3 {
    color: #6afcff;
    margin: 0 0 15px 0;
}

.voice-info-display p {
    margin: 0 0 10px 0;
}

.voice-info-display p:last-child {
    margin-bottom: 0;
}

.voice-info-display strong {
    color: #88aacc;
}

.voice-info-display span {
    color: #f0f0f0;
}

.code-content {
    float: left;
    width: 100%;
    text-align: left;
    overflow: auto;
}


/* ============================================
   AUDIO DISPLAY (for all audio generators)
   ============================================ */

.audio-meta {
    float: left;
    font-size: 0.85em;
    color: rgba(255, 255, 255, 0.75);
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.audio-meta-info {
    margin-top: 20px;
    margin-bottom: 15px;
}

.audio-output {
    margin-top: 20px;
}

.audio-player-placeholder {
    width: 100%;
}

.audio-output.no-top-margin {
    margin-top: 0;
}

.audio-output audio {
    width: 100%;
    max-width: 600px;
}

.rating-share-wrapper {
    margin-top: 20px;
}

/* ============================================
   VOICE GENERATOR SPECIFIC STYLES
   ============================================ */

.voice-library-link {
    margin-bottom: 20px;
}

.voice-library-link a {
    color: #4CAF50;
    text-decoration: none;
}

.voice-library-link a:hover {
    text-decoration: underline;
}

.voice-name-hint {
    font-size: 14px;
    margin-top: 5px;
    margin-bottom: 15px;
    opacity: 0.8;
}

.voice-audio-upload {
    width: 100%;
    padding: 10px;
    background: #2a4159;
    border: 1px solid #223552;
    border-radius: 4px;
    color: #88aacc;
    font-size: 14px;
    cursor: pointer;
    box-sizing: content-box;
}

.voice-audio-upload::-webkit-file-upload-button {
    background: #48658b;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    color: #f0f0f0;
    cursor: pointer;
    margin-right: 10px;
}

.voice-audio-upload::-webkit-file-upload-button:hover {
    background: #5a7ba6;
}

.voice-clone-hint {
    font-size: 14px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px;
    border-left: 3px solid #ffc107;
}

.generator-tip {
    max-width: 550px;
    margin: 10px auto;
    /* padding: 15px 20px; */
    box-sizing: border-box;
}

.generator-tip strong {
    color: #6afcff;
}

.generator-tip span {
    color: #f0f0f0;
}

.generator-tip a {
    color: #6afcff;
    text-decoration: underline;
}

.generator-tip a:hover {
    text-decoration: none;
}

.source-info-message {
    color: #88aacc;
    margin-bottom: 10px;
    font-size: 0.9em;
}

.source-info-message a {
    color: #6afcff;
}

.source-error-message {
    color: #ff8888;
    margin-bottom: 10px;
    font-size: 0.9em;
}

/* ============================================
   VOICE CONTROLS (Provider-specific settings)
   ============================================ */

#voice-controls-container {}

.voice-controls-group {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.voice-control-input {
    float: left;
    width: 100%;
    padding: 10px;
    background: #2a4159;
    border: 1px solid #223552;
    border-radius: 4px;
    color: #f0f0f0;
    font-size: 14px;
}

.voice-control-input:focus {
    outline: none;
    border-color: #6afcff;
    box-shadow: 0 0 0 2px rgba(106, 252, 255, 0.1);
}

.voice-control-slider {
    width: 100%;
    height: 8px;
    background: #2a4159;
    border-radius: 4px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.voice-control-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #6afcff;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
}

.voice-control-slider::-webkit-slider-thumb:hover {
    background: #5ae8f0;
    transform: scale(1.1);
}

.voice-control-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #6afcff;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
}

.voice-control-slider::-moz-range-thumb:hover {
    background: #5ae8f0;
    transform: scale(1.1);
}

.voice-control-checkbox {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    cursor: pointer;
    accent-color: #6afcff;
}

.voice-control-hint {
    font-size: 13px;
    margin: 0px 0 10px 0;
    float: left;
    text-align: center;
    width: 100%;
}

#voice-controls-container label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #f0f0f0;
    font-weight: 500;
    margin-bottom: 8px;
}

#voice-controls-container label span {
    color: #6afcff;
    font-weight: 600;
    min-width: 45px;
    text-align: right;
}

.user-input-wrap .voice-reset-btn {
    box-shadow: none;
    border: 0;
}

.voice-reset-btn:hover {
    background-color: #486989;
    border-color: rgba(106, 252, 255, 0.4);
    transform: translateY(-1px);
}

.voice-reset-btn:active {
    background-color: #2a4a6a;
    transform: translateY(0);
}

/* ============================================
   GENERATOR ADS (Loading State)
   ============================================ */

.generator-ad {
    margin: 20px 0;
    padding: 0;
    animation: slideInAd 0.4s ease-out;
}

@keyframes slideInAd {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.generator-ad-content {
    /* background: linear-gradient(135deg, #2a4159 0%, #1a3149 100%); */
    /* border: 1px solid #19304d;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); */
    padding: 16px;
    transition: all 0.3s ease;
}

.generator-ad-content:hover {
    border-color: rgba(106, 252, 255, 0.5);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    transform: translateY(-2px);
}

.generator-ad-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.generator-ad-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #88aacc;
    font-weight: 600;
}

.generator-ad-close {
    background: transparent;
    border: none;
    color: #88aacc;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    border-radius: 4px;
}

.generator-ad-close:hover {
    background: rgba(106, 252, 255, 0.1);
    color: #6afcff;
}

.generator-ad-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.generator-ad-title {
    font-size: 18px;
    font-family: 'Roboto', sans-serif;
    color: #6afcff;
    margin-bottom: 8px;
    line-height: 1.3;
}

.generator-ad-description {
    font-size: 14px;
    color: #d0d8e0;
    margin-bottom: 12px;
    line-height: 1.5;
}

.generator-ad-cta {
    font-size: 13px;
    color: #6afcff;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
}

.generator-ad-link:hover .generator-ad-cta {
    gap: 8px;
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
    .generator-ad {
        margin: 15px 0;
    }

    .generator-ad-content {
        padding: 14px;
    }

    .generator-ad-title {
        font-size: 16px;
    }

    .generator-ad-description {
        font-size: 13px;
    }
}

/* Streaming Audio Styles */
.audio-streaming-status {
    margin: 15px 0;
    padding: 15px;
    background: rgba(106, 252, 255, 0.1);
    border-left: 3px solid #6afcff;
    border-radius: 4px;
}

.audio-streaming-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
}

.audio-streaming-indicator .spinner {
    width: 20px;
    height: 20px;
    border: 3px solid rgba(106, 252, 255, 0.3);
    border-top-color: #6afcff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.audio-streaming-indicator .status-text {
    color: #6afcff;
    font-size: 14px;
    flex: 1;
}

.audio-streaming-indicator .progress-bar {
    width: 100%;
    height: 4px;
    background: rgba(106, 252, 255, 0.2);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 8px;
}

.audio-streaming-indicator .progress-fill {
    height: 100%;
    background: #6afcff;
    transition: width 0.3s ease;
    box-shadow: 0 0 10px rgba(106, 252, 255, 0.5);
}

.audio-player-container {
    display: none;
}

.audio-player-container audio {
    width: 100%;
    margin-top: 10px;
}

.story-audio-placeholder {
    float: left;
    width: 100%;
    margin: 25px 0;
}

.story-audio-placeholder .audio-container {
    margin: 0;
}

/* Style native audio controls for streaming */
.story-audio-placeholder audio[controls] {
    width: 100%;
    margin: 15px 0;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    padding: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(106, 252, 255, 0.2);
}

/* WebKit (Chrome, Safari, Edge) */
.story-audio-placeholder audio::-webkit-media-controls-panel {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 6px;
}

/* Firefox */
.story-audio-placeholder audio::-moz-media-controls {
    background: rgba(0, 0, 0, 0.5);
}

.action-buttons {
    float: left;
    margin: 20px 0;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.team-mode-options {
    margin-top: 10px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: rgba(8, 12, 24, 0.6);
    grid-column: 1 / span 2;
    display: none;
}

.team-mode-options .checkbox {
    /* display: block; */
}

.team-mode-options .checkbox .checkmark {
    top: 0;
}

.team-mode-options .team-mode-empty {
    font-size: 0.9em;
    color: #8ca4c8;
    margin: 0;
}

.privacy-picker-panel {
    position: absolute;
    z-index: 1200;
    width: 230px;
    padding: 16px;
}

.privacy-picker-heading {
    font-weight: 600;
    margin-bottom: 10px;
    font-size: 0.95rem;
}

.privacy-option.checkbox {
    padding: 4px 0 0 40px;
    margin: 4px 0;
    min-height: 32px;
    cursor: pointer;
}

.privacy-option .checkmark {
    top: 8px;
    width: 22px;
    height: 22px;
}

.privacy-option .option-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.privacy-option .option-text strong {
    font-size: 0.95rem;
    color: #f0f6ff;
}

.privacy-option .option-text span {
    font-size: 0.85rem;
    color: #9fb4d6;
}

.privacy-picker-team {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.privacy-picker-team .team-mode-empty {
    margin: 0;
    font-size: 0.9rem;
    color: #8ca4c8;
}

.privacy-picker-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 16px;
}

.privacy-picker-status {
    margin: 10px 0 5px;
    font-size: 0.85rem;
    color: #9fb4d6;
    float: left;
    width: 100%;
}

.privacy-picker-status.success {
    color: #6afcff;
}

.privacy-picker-status.error {
    color: #ff98a9;
}

/* Social generator */
.social-settings .settings-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.social-settings select,
.social-settings input[type="number"] {
    flex: 1 1 220px;
    min-width: 220px;
    background: rgba(15, 20, 33, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 10px;
    color: #f0f0f0;
}

.social-output {
    float: left;
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 18px;
    background: rgba(9, 14, 26, 0.65);
    margin-bottom: 22px;
    box-sizing: border-box;
}

.social-output.single-view {
    background: rgba(14, 20, 34, 0.72);
}

.social-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.social-chip {
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.82rem;
    letter-spacing: 0.02em;
}

.social-section {
    float: left;
    width: 100%;
    margin-bottom: 16px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    padding: 14px 16px;
    box-sizing: border-box;
}

.social-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.social-section .section-label {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.7);
}

.social-section p {
    margin: 0;
    line-height: 1.6;
}

.social-hashtag-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.social-hashtag-pills .pill {
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(106, 252, 255, 0.1);
    border: 1px solid rgba(106, 252, 255, 0.3);
    font-size: 0.8rem;
}

.social-visual,
.social-notes,
.social-extra {
    background: rgba(255, 255, 255, 0.02);
}

.social-copy-btn {
    font-size: 0.8rem;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    background: transparent;
    color: #f0f0f0;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.social-copy-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.6);
}

/* Generator Uniformity Utilities */

/* Contextual Content Box (replaces inline styles in settings) */
.generator-context-box {
    margin: 20px 0;
    padding: 15px;
    background: rgba(170, 136, 255, 0.1);
    border-left: 4px solid #aa88ff;
    border-radius: 4px;
}

.generator-context-box.blue-theme {
    background: rgba(72, 101, 139, 0.2);
    border-color: #304f78;
    border-left: 1px solid #223552;
    /* Reset left border if needed or keep consistent */
    border: 1px solid #223552;
}

.generator-context-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.generator-context-title {
    margin: 0;
    color: #aa88ff;
    font-size: 1.17em;
    font-weight: bold;
}

.generator-context-content {
    max-height: 200px;
    overflow-y: auto;
    padding: 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    white-space: pre-wrap;
    font-family: monospace;
    font-size: 0.9em;
    line-height: 1.6;
    margin-bottom: 0;
}

.generator-context-tip {
    margin: 10px 0 0 0;
    font-size: 0.9em;
    color: #88aacc;
}

/* Common Utility Classes */
.text-muted {
    color: #88aacc !important;
}

.text-highlight {
    color: #6afcff !important;
}

.text-center {
    text-align: center;
}

.w-100 {
    width: 100%;
}

.d-none {
    display: none;
}

.d-block {
    display: block;
}

.d-flex {
    display: flex;
}

.align-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

.mt-10 {
    margin-top: 10px;
}

.mt-20 {
    margin-top: 20px;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-20 {
    margin-bottom: 20px;
}

/* Specific Components */
.generator-time-estimate,
.video-time-estimate {
    margin-top: 10px;
    color: #6afcff;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.generator-duration-note {
    display: block;
    grid-column: 1 / -1;
    font-size: 0.9em;
    color: #88aacc;
    margin-top: -10px;
}

.generator-preview-media {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.generator-preview-container {
    margin-top: 20px;
    text-align: center;
}

/* Clean Link Style */
.clean-link {
    color: #6afcff;
    text-decoration: none;
}

.clean-link:hover {
    text-decoration: underline;
}


/* Podcast Script Truncation */
.podcast-script-text {
    /* font-size: 0.95em;
    line-height: 1.6;
    color: #e0e6ed;
    background: rgba(0, 0, 0, 0.2);
    padding: 15px;
    border-radius: 6px; */
    text-align: left;

    /* Truncation logic */
    max-height: 100px;
    overflow: hidden;
    position: relative;
    transition: max-height 0.5s ease;
    mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

.podcast-script-text.expanded {
    max-height: none;
    mask-image: none;
    -webkit-mask-image: none;
}

.generating-audio-msg {
    margin: 15px 0;
    padding: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    color: #88aacc;
    font-size: 0.9em;
}

.read-more-btn {
    display: block;
    width: 100%;
    padding: 10px;
    background: #17212c;
    border: 1px solid #3b5e7b;
    color: #6afcff;
    cursor: pointer;
    margin-top: 10px;
    border-radius: 5px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: roboto, sans-serif;
}

.inline-block-width,
a.inline-block-width.default-btn {
    display: inline-block;
    width: auto;
}

/* Story Preview Block Styles */
.story-preview-block {
    margin-bottom: 15px;
}

.story-preview-image {
    width: 120px;
    height: 120px;
    text-align: center;
    margin: 15px auto;
}

.story-preview-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

.story-preview-audio {
    margin-bottom: 10px;
}

.story-preview-text {
    overflow: hidden;
    font-size: 0.95em;
    line-height: 1.5;
    color: #d0d6dd;
}

.story-series-meta {
    display: inline-block;
    margin-top: 25px;
}

.story-tree-link {
    text-decoration: none;
}

.story-series-meta,
.series-header,
.story-part {
    float: left;
    width: 100%;
}

#model-info-modal {
    width: 600px;
    max-height: 90vh;
}

.model-info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    margin: 20px 0;
}

.empty-state,
.empty-state p {
    text-align: center;
}

.empty-state a.button {
    text-align: center;
    margin: 15px auto;
    display: inline-block;
    width: auto;
}

.filter-wrap {
    position: relative;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 15px;
}

#generator-filter {
    width: 100%;
    padding: 5px 10px;
    color: #f0f0f0;
    outline: none;
    transition: all 0.3s ease;
    box-sizing: border-box;
    text-align: left;
    margin-bottom: 0;
}

#generator-filter-trigger {
    height: 35px;
    font-size: 15px;
    font-family: inherit;
    color: #8ab4e6;
    transition: all 0.3s ease;
    cursor: pointer;
}

#generator-filter::placeholder {
    color: #8ab4e6;
    opacity: 0.7;
}

#generator-filter:focus {
    border-color: #6afcff;
    background-color: #000;
}

#filter-count {
    position: absolute;
    right: 0;
    top: -25px;
    transform: translateY(-50%);
    font-size: 13px;
    color: #8ab4e6;
    font-weight: 500;
    padding: 4px 10px;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.frontpage .list .item.filtered-out {
    max-height: 0 !important;
    padding: 0 !important;
    border: none !important;
    opacity: 0;
    pointer-events: none;
}

.frontpage h1 {
    margin-bottom: 25px;
}

#show-more-wrap {
    transition: opacity 0.2s ease, max-height 0.3s ease, padding 0.3s ease;
}

#show-more-wrap.filtered-out {
    max-height: 0 !important;
    padding: 0 !important;
    opacity: 0;
    pointer-events: none;
}

/* Footer generator list styles */
.footer-logo-clickable {
    cursor: pointer;
    transition: transform 0.2s ease;
}

.footer-logo-clickable:hover {
    transform: scale(1.05);
}

.frontpage .footer-logo-clickable:hover,
.frontpage .footer-logo-clickable {
    transform: none;
    cursor: default;
}

.footer-generator-list {
    padding: 0 20px;
    margin-bottom: 20px;
}

.footer-generator-list.open {
    display: block !important;
    max-height: 6000px !important;
    opacity: 1 !important;
}

.footer-filter-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 0 auto 25px;
    width: 186px;
}

#footer-generator-filter {
    padding: 12px 18px;
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
    border: 1px solid #223552;
    border-radius: 4px;
    background-color: #0b1521;
    color: #f0f0f0;
    outline: none;
    transition: all 0.3s ease;
    box-sizing: border-box;
    text-align: left;
}

#footer-generator-filter::placeholder {
    color: #8ab4e6;
    opacity: 0.7;
}

#footer-generator-filter:focus {
    border-color: #6afcff;
    background-color: #1a2638;
    box-shadow: 0 0 0 3px rgba(67, 232, 82, 0.1);
}

#generator-filter {
    width: 186px;
}

#footer-filter-count {
    position: absolute;
    right: 0;
    top: -25px;
    transform: translateY(-50%);
    font-size: 13px;
    color: #8ab4e6;
    font-weight: 500;
    padding: 4px 10px;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#footer-filter-count.visible {
    opacity: 1;
}

.footer-generator-item {
    transition: opacity 0.2s ease, max-height 0.3s ease, padding 0.3s ease, border 0.3s ease;
    overflow: hidden;
}

.footer-generator-item.filtered-out {
    display: none !important;
}

/* Range Slider Styles for Upscale Settings */
.range-slider-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.range-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: rgba(90, 143, 201, 0.3);
    outline: none;
    cursor: pointer;
}

.range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #5a8fc9;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: background 0.2s ease, transform 0.1s ease;
}

.range-slider::-webkit-slider-thumb:hover {
    background: #7bacd8;
    transform: scale(1.1);
}

.range-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #5a8fc9;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: background 0.2s ease, transform 0.1s ease;
}

.range-slider::-moz-range-thumb:hover {
    background: #7bacd8;
    transform: scale(1.1);
}

.range-value {
    min-width: 35px;
    text-align: center;
    font-weight: 500;
    color: #8ab4e6;
    font-size: 14px;
}

/* Topaz face options container */
#topaz-face-options {
    padding: 15px;
    margin: 10px 0;
    background: rgba(90, 143, 201, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(90, 143, 201, 0.2);
}

#topaz-face-options label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    color: #c5d5e8;
}