/**
 * Prompt Generator Styles
 * Matching the design from the image
 *
 * @package MadePrompt
 */

/* Prompt Generator Wrapper */
.prompt-generator-wrapper {
    width: 100%;
    margin: 0 0 var(--section-gap) 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.prompt-generator-box {
    width: 100%;
    max-width: 100%;
    background: rgba(var(--glass-rgb), 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--box-border-radius);
    padding: var(--box-padding-desktop);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Title */
.generator-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: #ffffff;
    text-align: center;
    margin: 0 0 2.5rem 0;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Type Selection Buttons */
.generator-type-selector {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.type-btn,
.prompt-gen-type-btn {
    padding: 1rem 3rem;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: rgba(var(--glass-rgb), 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.type-btn:hover,
.prompt-gen-type-btn:hover {
    background: rgba(var(--glass-hover-rgb), 0.75);
    backdrop-filter: blur(25px) saturate(200%);
    -webkit-backdrop-filter: blur(25px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.type-btn.active,
.prompt-gen-type-btn.active {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(30px) saturate(200%);
    -webkit-backdrop-filter: blur(30px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #000;
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.4), 0 6px 20px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}

/* Category Filters */
.generator-category-filters {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.category-btn,
.prompt-gen-category-btn {
    padding: 0.875rem 2rem;
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    cursor: not-allowed;
    transition: all 0.3s ease;
    background: rgba(var(--glass-rgb), 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    color: rgba(255, 255, 255, 0.7);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    opacity: 0.6;
}

.category-btn:not(:disabled),
.prompt-gen-category-btn:not(:disabled) {
    cursor: pointer;
    opacity: 1;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(var(--glass-rgb), 0.7);
}

.category-btn:not(:disabled):hover,
.prompt-gen-category-btn:not(:disabled):hover {
    background: rgba(var(--glass-hover-rgb), 0.75);
    backdrop-filter: blur(25px) saturate(200%);
    -webkit-backdrop-filter: blur(25px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* Active state - very visible! */
.category-btn.active,
.prompt-gen-category-btn.active {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(30px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(200%) !important;
    border: 2px solid rgba(255, 255, 255, 0.6) !important;
    color: #1c1c1e !important;
    font-weight: 800 !important;
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.5), 0 6px 20px rgba(0, 0, 0, 0.4) !important;
    opacity: 1 !important;
    cursor: pointer !important;
}

/* Prompt Output Container */
.prompt-output-container {
    width: 100%;
    margin-bottom: 2rem;
    padding: 2rem 1.5rem;
    background: rgba(var(--glass-rgb), 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}

/* Active state when prompt is generated - illuminate entire box */
.prompt-output-container.has-prompt {
    background: rgba(var(--glass-hover-rgb), 0.6);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
                0 0 40px rgba(255, 255, 255, 0.15),
                inset 0 0 30px rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(15px) saturate(200%);
    -webkit-backdrop-filter: blur(15px) saturate(200%);
}

.prompt-output {
    width: 100%;
    text-align: center;
}

.prompt-placeholder,
.prompt-gen-placeholder {
    color: rgba(255, 255, 255, 0.7);
    font-style: italic;
    font-size: 0.95rem;
    margin: 0;
}

.prompt-result,
.prompt-gen-result {
    color: #ffffff;
    font-size: 1rem;
    line-height: 1.6;
    word-wrap: break-word;
}

.prompt-gen-placeholder {
    display: block;
}

.prompt-gen-result {
    display: none;
}

.prompt-gen-result:not(:empty) {
    display: block;
}

.prompt-gen-placeholder:has(+ .prompt-gen-result:not(:empty)) {
    display: none;
}

/* Custom Prompt Container */
.custom-prompt-container {
    width: 100%;
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.custom-prompt-label {
    font-weight: 600;
    font-size: 0.95rem;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.custom-prompt-input {
    width: 100%;
    padding: 1rem 1.5rem;
    font-size: 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    background: rgba(var(--glass-rgb), 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    color: #ffffff;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.custom-prompt-input::placeholder {
    color: rgba(255, 255, 255, 0.7);
    font-style: italic;
}

.custom-prompt-input:focus {
    outline: none;
    background: rgba(var(--glass-hover-rgb), 0.75);
    backdrop-filter: blur(25px) saturate(200%);
    -webkit-backdrop-filter: blur(25px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* Generate Button Container */
.generate-button-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

/* Output Mode Toggle (Quick / Pro) */
.generator-output-mode {
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.generator-output-mode .mode-btn,
.generator-output-mode .prompt-gen-mode-btn {
    padding: 0.65rem 1.1rem;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s ease;
    background: rgba(var(--glass-rgb), 0.55);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    color: rgba(255, 255, 255, 0.85);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.generator-output-mode .mode-btn:hover,
.generator-output-mode .prompt-gen-mode-btn:hover {
    background: rgba(var(--glass-hover-rgb), 0.75);
    border-color: rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.95);
    transform: translateY(-1px);
}

.generator-output-mode .mode-btn.active,
.generator-output-mode .prompt-gen-mode-btn.active {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(255, 255, 255, 0.45);
    color: #111;
    box-shadow: 0 0 18px rgba(255, 255, 255, 0.22), 0 6px 18px rgba(0, 0, 0, 0.25);
}

.generator-output-mode .mode-btn:focus-visible,
.generator-output-mode .prompt-gen-mode-btn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.55);
    outline-offset: 2px;
}

.generate-btn,
.prompt-gen-generate-btn {
    width: 100%;
    max-width: 500px;
    padding: 1.25rem 3rem;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: rgba(var(--glass-rgb), 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.generate-btn:hover,
.prompt-gen-generate-btn:hover {
    background: rgba(var(--glass-hover-rgb), 0.75);
    backdrop-filter: blur(25px) saturate(200%);
    -webkit-backdrop-filter: blur(25px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}

.generate-btn:active,
.prompt-gen-generate-btn:active {
    transform: translateY(0);
}

/* Copy Button */
.prompt-copy-btn,
.prompt-gen-copy-btn {
    display: none;
    margin-top: 1rem;
    padding: 0.875rem 2rem;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: rgba(var(--glass-rgb), 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    align-items: center;
    gap: 0.5rem;
}

.prompt-copy-btn:hover,
.prompt-gen-copy-btn:hover {
    background: rgba(var(--glass-hover-rgb), 0.75);
    backdrop-filter: blur(25px) saturate(200%);
    -webkit-backdrop-filter: blur(25px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}

.prompt-copy-btn .copy-icon {
    font-size: 1.1rem;
}

.prompt-copy-btn .copy-text {
    font-size: 0.9rem;
}

/* Prompt Output Container - Updated */
.prompt-output-container {
    width: 100%;
    margin-bottom: 2rem;
    padding: 2rem 1.5rem;
    background: rgba(var(--glass-rgb), 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

/* Hero Section */
.pg-hero-section {
    width: 100%;
    margin: 0 0 var(--section-gap) 0;
    text-align: center;
}

.pg-hero-content {
    background: rgba(var(--glass-rgb), 0.5);
    backdrop-filter: blur(25px) saturate(200%);
    -webkit-backdrop-filter: blur(25px) saturate(200%);
    border: none;
    border-radius: var(--box-border-radius);
    padding: var(--box-padding-desktop);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    position: relative;
    overflow: hidden;
}

.pg-hero-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.1) 50%, 
        transparent 100%);
    pointer-events: none;
}

.pg-hero-title {
    font-size: 3rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 1.5rem 0;
    text-transform: uppercase;
    letter-spacing: 3px;
    line-height: 1.2;
    position: relative;
    z-index: 1;
}

.pg-hero-description {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.8;
    margin: 0;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
}

/* History Section */
.pg-history-section {
    width: 100%;
    margin: var(--section-gap) 0;
}

.pg-history-box {
    background: rgba(var(--glass-rgb), 0.5);
    backdrop-filter: blur(25px) saturate(200%);
    -webkit-backdrop-filter: blur(25px) saturate(200%);
    border: none;
    border-radius: var(--box-border-radius);
    padding: var(--box-padding-desktop);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    position: relative;
    overflow: hidden;
}

.pg-history-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.1) 50%, 
        transparent 100%);
    pointer-events: none;
}

.pg-history-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    margin: 0 0 2rem 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: 'Courier New', monospace;
    position: relative;
    z-index: 1;
}

.pg-history-container {
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0.2);
}

.pg-history-container::-webkit-scrollbar {
    width: 8px;
}

.pg-history-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.pg-history-container::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

.pg-history-container::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}

.pg-history-scroll {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pg-history-empty {
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-style: italic;
    padding: 2rem;
    margin: 0;
}

.pg-history-item {
    background: rgba(var(--glass-rgb), 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.25rem;
    transition: all 0.3s ease;
}

.pg-history-item:hover {
    background: rgba(var(--glass-hover-rgb), 0.5);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateX(4px);
}

.pg-history-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.pg-history-timestamp {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.75);
    font-family: 'Courier New', monospace;
    font-weight: 600;
}

.pg-history-meta {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: 'Courier New', monospace;
}

.pg-history-item-text {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    word-wrap: break-word;
    font-family: 'Courier New', monospace;
}

/* Brands Section */
.pg-brands-section {
    width: 100%;
    margin: var(--section-gap) 0 0 0;
}

.pg-brands-container {
    width: 100%;
}

/* Brands Box (glassmorphism) */
.pg-brands-box {
    background: rgba(var(--glass-rgb), 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--box-border-radius);
    padding: var(--box-padding-desktop);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Box Header */
.pg-brands-box-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 2rem;
    gap: 1rem;
}

.pg-brands-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: #ffffff;
    text-align: center;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* View All Button - Unified style with homepage */
.pg-brands-view-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    color: #ffffff;
    background: rgba(var(--glass-rgb), 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
}

.pg-brands-view-all-btn:hover {
    background: rgba(var(--glass-hover-rgb), 0.75);
    backdrop-filter: blur(25px) saturate(200%);
    -webkit-backdrop-filter: blur(25px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
    color: #ffffff;
}

.pg-brands-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.pg-brand-card {
    position: relative;
    background: rgba(var(--glass-rgb), 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--box-border-radius-mobile);
    padding: 2rem;
    padding-top: 2.5rem;
    margin-top: 0.75rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.pg-brand-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    background: rgba(var(--glass-hover-rgb), 0.75);
    backdrop-filter: blur(25px) saturate(200%);
    -webkit-backdrop-filter: blur(25px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.pg-brand-card-title {
    font-size: 1.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, 
        #ffffff 0%, 
        var(--brand-accent-color, #ffffff) 50%, 
        #ffffff 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    text-align: center;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

.pg-brand-card-image-container {
    width: 100%;
    height: 350px;
    overflow: hidden;
    background: transparent;
    border: none;
    border-radius: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pg-brand-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 24px;
}

/* Brand Badge */
.pg-brand-badge {
    position: absolute;
    top: -0.75rem;
    right: 1rem;
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 8px;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.pg-brand-badge-popular {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: #000;
}

.pg-brand-badge-new {
    background: linear-gradient(135deg, #00C853 0%, #00E676 100%);
    color: #fff;
}

.pg-brand-badge-top-rated {
    background: linear-gradient(135deg, #FF5722 0%, #FF7043 100%);
    color: #fff;
}

.pg-brand-badge-editor-choice {
    background: linear-gradient(135deg, #9C27B0 0%, #BA68C8 100%);
    color: #fff;
}

.pg-brand-badge-free {
    background: linear-gradient(135deg, #4CAF50 0%, #81C784 100%);
    color: #fff;
}

.pg-brand-badge-premium {
    background: linear-gradient(135deg, #FFD700 0%, #FFC107 100%);
    color: #000;
}

.pg-brand-card-description {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    line-height: 1.6;
    text-align: center;
}

.pg-brand-card-button {
    display: block;
    width: 100%;
    padding: 1rem 2rem;
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid color-mix(in srgb, var(--brand-accent-color, #ffffff) 30%, transparent);
    border-radius: 12px;
    text-decoration: none;
    text-align: center;
    color: #ffffff;
    background: var(--brand-accent-color, rgba(var(--glass-rgb), 0.6));
    transition: all 0.3s ease;
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.3),
        0 0 20px color-mix(in srgb, var(--brand-accent-color, transparent) 30%, transparent);
}

.pg-brand-card-button:hover {
    background: color-mix(in srgb, var(--brand-accent-color, #ffffff) 110%, #000);
    border-color: color-mix(in srgb, var(--brand-accent-color, #ffffff) 50%, transparent);
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.4),
        0 0 30px color-mix(in srgb, var(--brand-accent-color, transparent) 50%, transparent);
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 1024px) {
    .pg-brands-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .pg-hero-title {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {
    .prompt-generator-wrapper {
        margin-bottom: var(--section-gap-mobile);
    }
    
    .prompt-generator-box {
        padding: var(--box-padding-mobile);
        border-radius: var(--box-border-radius-mobile);
    }
    
    .generator-title {
        font-size: 1.5rem;
        letter-spacing: 2px;
    }
    
    /* Type buttons - mobile grid layout (same as categories) */
    .generator-type-selector {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.65rem;
        margin-bottom: 1.75rem;
    }
    
    .type-btn,
    .prompt-gen-type-btn {
        padding: 0.85rem 1.25rem;
        font-size: 0.85rem;
        letter-spacing: 0.8px;
        border-radius: 10px;
        min-width: 0;
    }
    
    /* Category buttons - mobile grid layout */
    .generator-category-filters {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.65rem;
        margin-bottom: 1.75rem;
    }
    
    .category-btn,
    .prompt-gen-category-btn {
        padding: 0.85rem 1.25rem;
        font-size: 0.8rem;
        letter-spacing: 0.8px;
        border-radius: 10px;
        min-width: 0;
        white-space: nowrap;
    }
    
    /* LESBIAN - full width on mobile for better layout */
    .category-btn:last-child,
    .prompt-gen-category-btn:last-child {
        grid-column: 1 / -1;
    }
    
    .pg-hero-section {
        margin-bottom: var(--section-gap-mobile);
    }
    
    .pg-hero-content {
        padding: var(--box-padding-mobile);
        border-radius: var(--box-border-radius-mobile);
    }
    
    .pg-hero-title {
        font-size: 2rem;
        letter-spacing: 2px;
    }
    
    .pg-hero-description {
        font-size: 1rem;
    }
    
    .pg-history-section {
        margin: var(--section-gap-mobile) 0;
    }
    
    .pg-history-box {
        padding: var(--box-padding-mobile);
        border-radius: var(--box-border-radius-mobile);
    }
    
    .pg-history-title {
        font-size: 1.25rem;
    }
    
    .pg-history-container {
        max-height: 400px;
        padding: 1rem;
    }
    
    .pg-brands-section {
        margin-top: var(--section-gap-mobile);
    }
    
    .pg-brands-box {
        padding: var(--box-padding-mobile);
        border-radius: var(--box-border-radius-mobile);
    }
    
    .pg-brands-box-header {
        gap: 0.75rem;
        margin-bottom: var(--section-gap-mobile);
    }
    
    .pg-brands-title {
        font-size: 1.5rem;
        letter-spacing: 2px;
    }
    
    .pg-brands-view-all-btn {
        font-size: 0.8rem;
        padding: 0.7rem 1.5rem;
        letter-spacing: 0.5px;
    }
    
    .pg-brands-grid {
        grid-template-columns: 1fr;
        gap: var(--section-gap-mobile);
    }
    
    .pg-brand-card {
        padding: 1.5rem;
        gap: 1.25rem;
    }
    
    .pg-brand-card-image-container {
        height: 350px;
    }
    
    .pg-brand-badge {
        top: -0.5rem;
        right: 0.75rem;
        padding: 0.4rem 0.75rem;
        font-size: 0.65rem;
        border-radius: 6px;
    }
    
    .pg-brand-card-title {
        font-size: 1.25rem;
    }
    
    .pg-brand-card-button {
        width: 100%;
        padding: 1rem 2rem;
        font-size: 0.9rem;
    }
}

/* ==========================================
   TOAST NOTIFICATION
   Notifiche temporanee per feedback utente
   ========================================== */

.madeprompt-toast {
    position: fixed;
    top: 25px;
    left: 50%;
    transform: translate(-50%, -100px);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    color: #ffffff;
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    font-size: 0.9rem;
    font-weight: 700;
    z-index: 10000;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    white-space: normal;
    max-width: min(92vw, 560px);
    box-sizing: border-box;
    text-align: center;
    letter-spacing: 0.5px;
}

.madeprompt-toast.show {
    transform: translate(-50%, 0);
    opacity: 1;
}

.madeprompt-toast-success {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.madeprompt-toast-error {
    border-left: 4px solid #E94B3C;
}

.madeprompt-toast-info {
    border-left: 4px solid #4A90E2;
}

/* ==========================================
   PROMPT RESULT HIGHLIGHT EFFECT
   Animazione quando il prompt viene generato
   ========================================== */

.prompt-generated-highlight {
    animation: promptHighlight 2.5s ease-out;
}

@keyframes promptHighlight {
    0% {
        filter: brightness(1.3);
        transform: scale(1.02);
    }
    50% {
        filter: brightness(1.15);
    }
    100% {
        filter: brightness(1);
        transform: scale(1);
    }
}

/* Mobile Toast */
@media (max-width: 768px) {
    .madeprompt-toast {
        top: 20px;
        left: 50%;
        right: auto;
        transform: translate(-50%, -100px);
        width: auto;
        max-width: calc(100% - 2rem);
        text-align: center;
        font-size: 0.85rem;
        padding: 0.7rem 1.25rem;
        white-space: normal;
    }
    
    .madeprompt-toast.show {
        transform: translate(-50%, 0);
    }
}

/* ==========================================
   PROMPT SUGGESTIONS
   Suggerimenti tool dopo generazione prompt
   Elegante, migliorato con colori brand
   ========================================== */

.prompt-suggestions {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    padding: 0;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(25px) saturate(200%);
    -webkit-backdrop-filter: blur(25px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    position: relative;
    overflow: hidden;
}

/* Icona sparkles */


/* Toggle button - elegante glass effect */


/* Content container - nascosto di default */
.prompt-suggestions-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s ease, opacity 0.3s ease;
    padding: 0;
    margin: 0;
    opacity: 0;
}

.prompt-suggestions.expanded .prompt-suggestions-content {
    max-height: 500px;
    padding: 0 1rem 1rem 1rem;
    margin-top: 0;
    opacity: 1;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: 0 0 12px 12px;
    box-shadow: none;
    padding-top: 0.5rem;
}

.prompt-suggestions.expanded {
    border-radius: 12px;
}

.prompt-suggestions.expanded 


.prompt-suggestion-tool {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: rgba(var(--glass-rgb), 0.6);
    backdrop-filter: blur(15px) saturate(150%);
    -webkit-backdrop-filter: blur(15px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 3px solid var(--brand-color, #ffffff);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.2px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.prompt-suggestion-tool::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--brand-color, rgba(255, 255, 255, 0.1)) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.prompt-suggestion-tool:hover {
    background: rgba(var(--glass-rgb), 0.8);
    border-color: var(--brand-color, rgba(255, 255, 255, 0.25));
    border-left-width: 4px;
    transform: translateX(3px) translateY(-1px);
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 20px var(--brand-color, rgba(255, 255, 255, 0.1));
}

.prompt-suggestion-tool:hover::before {
    opacity: 0.15;
}

.prompt-suggestion-tool-name {
    position: relative;
    z-index: 1;
    font-weight: 500;
}

.prompt-suggestion-tool-arrow {
    color: var(--brand-color, rgba(255, 255, 255, 0.7));
    font-weight: 600;
    font-size: 0.875rem;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s ease;
    position: relative;
    z-index: 1;
}

.prompt-suggestion-tool:hover .prompt-suggestion-tool-arrow {
    transform: translateX(4px);
    color: var(--brand-color, #ffffff);
    filter: drop-shadow(0 0 4px var(--brand-color, rgba(255, 255, 255, 0.5)));
}

@media (max-width: 768px) {
    .prompt-suggestions {
        margin-top: 1.25rem;
        margin-bottom: 0.875rem;
    }
    

    

    
    .prompt-suggestions.expanded .prompt-suggestions-content {
        padding: 0 0.875rem 0.875rem 0.875rem;
        margin-top: 0;
    }
    

    

    
    .prompt-suggestion-tool {
        width: 100%;
        justify-content: space-between;
        font-size: 0.75rem;
        padding: 0.5625rem 0.875rem;
    }
    
    .prompt-suggestion-tool:hover {
        transform: translateX(2px) translateY(-1px);
    }
}

/* ==========================================
   PROMPT GENERATOR PAGE - ABOUT SECTION
   Same structure as homepage about section
   ========================================== */

.pg-about-section {
    width: 100%;
    margin: var(--section-gap) 0 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pg-about-box {
    width: 100%;
    max-width: 100%;
    padding: var(--box-padding-desktop);
    background: rgba(var(--glass-rgb), 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--box-border-radius);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.pg-about-title {
    font-size: 2rem;
    font-weight: 800;
    color: #ffffff;
    text-align: center;
    margin: 0 0 1.5rem 0;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Content - Collapsible */
.pg-about-content {
    margin: 0;
    position: relative;
    max-height: 300px;
    overflow: hidden;
    transition: max-height 0.5s ease;
}

.pg-about-content.expanded {
    max-height: 5000px;
}

.pg-about-content-inner {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.05rem;
    line-height: 1.8;
}

.pg-about-content p {
    margin-bottom: 1rem;
}

.pg-about-content h2,
.pg-about-content h3 {
    color: #ffffff;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

.pg-about-content ul,
.pg-about-content ol {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.pg-about-content li {
    margin-bottom: 0.5rem;
    color: rgba(255, 255, 255, 0.85);
}

.pg-about-content strong {
    color: #ffffff;
    font-weight: 700;
}

.pg-about-content a {
    color: var(--prose-link);
    text-decoration: underline;
    text-decoration-color: var(--prose-line);
    text-underline-offset: 3px;
}

.pg-about-content a:hover {
    text-decoration-color: currentColor;
}

/* Toggle Button */
.pg-about-toggle-container {
    text-align: center;
    margin-top: 1.5rem;
}

.pg-about-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 2rem;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: rgba(var(--glass-rgb), 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    transition: all 0.3s ease;
}

.pg-about-toggle-btn:hover {
    background: rgba(var(--glass-hover-rgb), 0.75);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

.pg-toggle-icon {
    font-size: 0.7rem;
    transition: transform 0.3s ease;
}

/* Mobile */
@media (max-width: 768px) {
    .pg-about-section {
        margin: var(--section-gap-mobile) 0 0 0;
    }
    
    .pg-about-box {
        padding: var(--box-padding-mobile);
        border-radius: var(--box-border-radius-mobile);
    }
    
    .pg-about-title {
        font-size: 1.5rem;
        letter-spacing: 1.5px;
        margin-bottom: 1.25rem;
    }
    
    .pg-about-content {
        max-height: 250px;
    }
    
    .pg-about-content-inner {
        font-size: 0.95rem;
        line-height: 1.7;
    }
    
    .pg-about-toggle-btn {
        padding: 0.65rem 1.5rem;
        font-size: 0.75rem;
    }
}

/* ==========================================
   PROMPT GENERATOR PAGE - RELATED ARTICLES SECTION
   Articles related to prompt writing and generation
   ========================================== */

.pg-related-articles-section {
    width: 100%;
    margin: var(--section-gap) 0 0 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.pg-related-articles-container {
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.pg-related-articles-box {
    width: 100%;
    background: rgba(var(--glass-rgb), 0.5);
    backdrop-filter: blur(25px) saturate(200%);
    -webkit-backdrop-filter: blur(25px) saturate(200%);
    border: none;
    border-radius: var(--box-border-radius);
    padding: var(--box-padding-desktop);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    position: relative;
    overflow: hidden;
}

.pg-related-articles-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.1) 50%, 
        transparent 100%);
    pointer-events: none;
}

.pg-related-articles-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 2rem;
    gap: 1rem;
    position: relative;
    z-index: 1;
}

.pg-related-articles-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 1.2;
    position: relative;
    z-index: 1;
}

.pg-related-articles-view-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    color: #ffffff;
    background: rgba(var(--glass-rgb), 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
}

.pg-related-articles-view-all-btn:hover {
    background: rgba(var(--glass-hover-rgb), 0.75);
    backdrop-filter: blur(25px) saturate(200%);
    -webkit-backdrop-filter: blur(25px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
    color: #ffffff;
}

.pg-related-article-single {
    width: 100%;
}

.pg-related-article-card {
    background: rgba(var(--glass-rgb), 0.4);
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
}

.pg-related-article-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.2);
}

/* NEW Badge - Article Style (same elegant glassmorphism style as homepage) */
.pg-related-article-card .article-new-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.4rem 0.85rem;
    background: rgba(139, 92, 246, 0.15);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    border: 1px solid rgba(139, 92, 246, 0.3);
    color: #a78bfa;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: 8px;
    z-index: 10;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
    white-space: nowrap;
}

.pg-related-article-card .article-new-badge::before {
    content: 'NEW';
    display: block;
}

.pg-related-article-card .article-new-badge::after {
    content: '';
    display: none;
}

.pg-related-article-card:hover .article-new-badge {
    background: rgba(139, 92, 246, 0.2);
    border-color: rgba(139, 92, 246, 0.4);
    color: #c4b5fd;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}

.pg-related-article-card:hover .article-new-badge {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    box-shadow: 0 6px 18px rgba(239, 68, 68, 0.5),
                0 3px 8px rgba(0, 0, 0, 0.4),
                inset 0 1px 2px rgba(255, 255, 255, 0.35);
    transform: scale(1.05) rotate(5deg);
    border-color: rgba(255, 255, 255, 0.3);
}

.pg-related-article-image-container {
    width: 100%;
    height: 280px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.3);
    position: relative;
}

.pg-related-article-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.pg-related-article-card:hover .pg-related-article-image {
    transform: scale(1.05);
}

.pg-related-article-content {
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Article Meta Bar */
.pg-related-article-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
}

.pg-related-article-reading-time,
.pg-related-article-date {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.meta-icon {
    width: 13px;
    height: 13px;
    opacity: 0.7;
}

.pg-related-article-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 1rem 0;
    line-height: 1.3;
}

.pg-related-article-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.pg-related-article-title a:hover {
    color: rgba(255, 255, 255, 0.8);
}

.pg-related-article-excerpt {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
    margin: 0 0 1.5rem 0;
    flex: 1;
}

.pg-related-article-read-more {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    margin-top: auto;
    padding: 0.75rem 0;
}

.pg-related-article-read-more:hover {
    color: #ffffff;
    transform: translateX(4px);
}

.read-more-text {
    text-transform: uppercase;
    letter-spacing: 1px;
}

.read-more-arrow {
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.pg-related-article-read-more:hover .read-more-arrow {
    transform: translateX(4px);
}

/* Mobile */
@media (max-width: 768px) {
    .pg-related-articles-section {
        margin: var(--section-gap-mobile) 0 0 0;
    }
    
    .pg-related-articles-box {
        padding: var(--box-padding-mobile);
        border-radius: var(--box-border-radius-mobile);
    }
    
    .pg-related-articles-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-bottom: 1.5rem;
    }
    
    .pg-related-articles-title {
        font-size: 1.5rem;
        letter-spacing: 1.5px;
    }
    
    .pg-related-articles-view-all-btn {
        width: 100%;
        justify-content: center;
    }
    
    .pg-related-article-image-container {
        height: 200px;
    }
    
    .pg-related-article-content {
        padding: 1.25rem;
    }
    
    .pg-related-article-meta {
        font-size: 0.7rem;
        gap: 0.75rem;
        margin-bottom: 0.875rem;
    }
    
    .pg-related-article-title {
        font-size: 1.25rem;
        margin-bottom: 0.875rem;
    }
    
    .pg-related-article-excerpt {
        font-size: 0.875rem;
        margin-bottom: 1.25rem;
    }
    
    .pg-related-article-read-more {
        font-size: 0.8125rem;
    }
}

/* Prompt sharing (#3) — rendered by prompt-generator.js only when enabled in
   Brands -> Community Library (off by default). Glass style, matches copy button. */
.pg-share-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.pg-share-label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
}

.pg-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.4rem 0.85rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pg-share-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.pg-share-ic {
    font-size: 0.85rem;
}

/* ------------------------------------------------------------------
   Proposta 2, 2026-08-18: il blocco "Try this prompt with" e il punto
   in cui l'utente ha il prompt in mano e decide se andare su uno degli
   strumenti. Era una fila di pillole piccole affiancate, che a colpo
   d'occhio leggeva come un'etichetta invece che come un invito.

   Qui diventa: pannello un po' piu presente, una scheda per riga a
   larghezza piena, fondo tinto del colore del brand e filetto laterale
   piu spesso. Nessun contenuto cambia, nessun link cambia, e i colori
   restano quelli gia definiti da --brand-color.

   Solo CSS. Per annullare: ripristinare il backup in
   /home/forge/backups/proposta2-20260818/.
   ------------------------------------------------------------------ */
.prompt-suggestions {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.30);
}


.prompt-suggestion-tool {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0.8rem 1rem;
    font-size: 0.9375rem;
    border-left-width: 4px;
    background: rgba(var(--glass-rgb), 0.6);
    background: color-mix(in srgb, var(--brand-color, #ffffff) 13%, rgba(var(--glass-rgb), 0.6));
    border-color: rgba(255, 255, 255, 0.14);
    border-left-color: var(--brand-color, #ffffff);
}

.prompt-suggestion-tool:hover {
    background: rgba(var(--glass-rgb), 0.8);
    background: color-mix(in srgb, var(--brand-color, #ffffff) 22%, rgba(var(--glass-rgb), 0.8));
}

.prompt-suggestion-tool-arrow {
    font-size: 1rem;
    opacity: 0.9;
}

/* ------------------------------------------------------------------
   Variante "uno consigliato", 2026-08-18. Sostituisce i tre bottoni
   uguali: uno solo in evidenza (il primo dell'ordine curato nel
   backend) e gli altri come collegamenti discreti sotto.
   La vecchia intestazione con la stella non c'e' piu.
   ------------------------------------------------------------------ */
.prompt-suggestions-head {
    padding: 0.85rem 1rem 0.6rem;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.prompt-suggestion-lead {
    padding: 1rem 1.1rem;
    font-size: 1.0625rem;
}

.prompt-suggestion-lead .prompt-suggestion-tool-arrow {
    font-size: 1.15rem;
}

.prompt-suggestions-alt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.6rem;
    margin-top: 1.05rem;
    padding-left: 0.15rem;
}

/* Doppia classe di proposito: deve battere la regola a larghezza piena.
   backdrop-filter va spento esplicitamente, altrimenti resta attivo sopra
   uno sfondo trasparente e disegna il rettangolo smerigliato che si vedeva. */
.prompt-suggestion-tool.prompt-suggestion-alt-item {
    display: inline-flex;
    width: auto;
    padding: 0.1rem 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.45);
    position: relative;
    transition: color 0.25s ease;
}

.prompt-suggestion-tool.prompt-suggestion-alt-item::before {
    content: '';
    position: absolute;
    top: auto;
    left: 0;
    right: 0;
    bottom: -3px;
    width: auto;
    height: 1px;
    background: currentColor;
    opacity: 0.35;
    transition: background 0.25s ease, opacity 0.25s ease;
}

.prompt-suggestion-tool.prompt-suggestion-alt-item:hover {
    background: none;
    color: rgba(255, 255, 255, 0.92);
    transform: none;
    box-shadow: none;
}

.prompt-suggestion-tool.prompt-suggestion-alt-item:hover::before {
    background: var(--brand-color, #ffffff);
    opacity: 1;
}

/* Il titolo della scheda e' ora il percorso interno verso la recensione,
   mentre il bottone porta allo strumento. Deve restare un titolo, non
   sembrare un link: eredita colore e peso, si sottolinea solo al passaggio. */
.pg-brand-card-title-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}

.pg-brand-card-title-link:hover {
    color: inherit;
    border-bottom-color: currentColor;
}

/* ------------------------------------------------------------------
   Blocco "Best for this prompt", versione finale 2026-08-18.

   Via il contenitore: il blocco sta gia' dentro il riquadro del
   risultato, un secondo bordo a due centimetri era scatola su scatola.
   Via anche il velo bianco al 16%, che su una pagina di vetri scuri
   leggeva come una lastra grigia.

   Il consigliato diventa una barra in vetro colorato al 60%, non una
   tinta piatta: resta trasparente come tutto il resto della pagina.
   L'etichetta prende lo stesso colore mescolato al bianco, mai il colore
   puro, perche' un brand come AiNudez e' #000000 e sparirebbe sul nero.
   ------------------------------------------------------------------ */
.prompt-suggestions {
    background: none;
    border: none;
    border-radius: 0;
    overflow: visible;
    margin-top: 1.4rem;
}

.prompt-suggestions.expanded {
    border-radius: 0;
}

.prompt-suggestions.expanded .prompt-suggestions-content {
    padding: 0;
}

.prompt-suggestions-head {
    padding: 0 0 0.7rem;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    color: color-mix(in srgb, var(--brand-color, #ffffff) 45%, rgba(255, 255, 255, 0.85));
}

.prompt-suggestion-tool.prompt-suggestion-lead {
    justify-content: center;
    gap: 0.65rem;
    padding: 0.95rem 1.1rem;
    font-size: 0.9375rem;
    letter-spacing: 0.03em;
    color: #ffffff;
    border-radius: 11px;
    border: 1px solid var(--brand-color, #ffffff);
    border-left-width: 1px;
    background: var(--brand-color, #ffffff);
    background: color-mix(in srgb, var(--brand-color, #ffffff) 60%, transparent);
    box-shadow: none;
}

.prompt-suggestion-tool.prompt-suggestion-lead:hover {
    background: color-mix(in srgb, var(--brand-color, #ffffff) 74%, transparent);
    transform: translateY(-1px);
}

.prompt-suggestion-lead .prompt-suggestion-tool-arrow {
    font-size: 1.05rem;
    opacity: 1;
}

/* ------------------------------------------------------------------
   Larghezze del blocco, 2026-08-18.

   Il contenitore del risultato e' flex in colonna con align-items:center,
   quindi ogni figlio si stringe sul proprio contenuto: era quello a tenere
   stretto sia il blocco sia il bottone copia, su desktop come su mobile.
   Non lo tocco, perche' regge anche il testo del prompt. Do invece una
   larghezza esplicita al solo blocco.

   Desktop: tetto 460px, circa una volta e mezza il COPY PROMPT.
   Mobile: nessun tetto, larghezza piena, piu' area toccabile.
   Titolo e alternative centrati come tutto il resto del riquadro.
   ------------------------------------------------------------------ */
.prompt-suggestions {
    width: 100%;
    max-width: 460px;
    margin-top: 1rem;
    margin-left: auto;
    margin-right: auto;
}

.prompt-suggestions-head {
    text-align: center;
}

.prompt-suggestions-alt {
    justify-content: center;
    gap: 1.7rem;
    margin-top: 1.15rem;
    padding-left: 0;
}

@media (max-width: 768px) {
    .prompt-suggestions {
        max-width: none;
        margin-top: 0.9rem;
    }
}