/* cosmetic_detail.html (moved out of the template, on the tokens) */
        .cosmetic-detail-container { 
            background-color: var(--surface-1); 
            border: 1px solid var(--border-soft); 
            padding: 2em; 
            border-radius: 5px; 
            text-align: center; 
            max-width: 800px;
            margin: 0 auto;
        }
        .cosmetic-detail-image-container {
            width: 100%;
            max-width: 512px;
            aspect-ratio: 1 / 1;
            background-color: var(--surface-inset);
            border-radius: 5px;
            margin: 0 auto 1.5em auto;
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .cosmetic-detail-image-container img { 
            max-width: 100%; 
            max-height: 100%; 
            object-fit: contain; 
            filter: drop-shadow(3px 3px 4px rgba(0, 0, 0, 0.8));
        }
        .cost-display { font-family: var(--body-font); font-size: 1.1em; margin-top: 1em; display: flex; align-items: center; justify-content: center; gap: 5px;}

        /* Community showcase (animated preview) */
        .cosmetic-detail-image-container.has-showcase { position: relative; overflow: hidden; }
        .cosmetic-detail-image-container .showcase-media { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; filter: none; }
        .cosmetic-detail-image-container .showcase-icon-thumb {
            position: absolute; left: 10px; bottom: 10px; width: 64px; height: 64px; object-fit: contain;
            background: rgba(0,0,0,0.45); border: 1px solid var(--border-soft); border-radius: 6px; padding: 4px;
        }
        .showcase-toggle {
            position: absolute; right: 10px; bottom: 10px; background: rgba(0,0,0,0.5); color: var(--text-color);
            border: 1px solid var(--border-soft); border-radius: 6px; padding: 4px 8px; cursor: pointer; font-size: 14px; line-height: 1;
        }
        .showcase-credit { margin: -0.8em 0 1em 0; }
        .showcase-credit a { color: var(--accent); text-decoration: none; }
        .showcase-box { margin: 0.5em auto 1em auto; max-width: 600px; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--border-soft); background: rgba(255,255,255,0.04); text-align: left; }
        .showcase-prompt .showcase-btn { margin-top: 10px; }
        .showcase-status { padding: 8px 10px; border-radius: 6px; }
        .showcase-status.pending { background: rgba(200,160,50,0.1); border: 1px solid rgba(200,160,50,0.35); color: #c8a84b; }
        .showcase-status.rejected { background: rgba(255,115,115,0.1); border: 1px solid rgba(255,115,115,0.35); color: #ff9c9c; }
        .showcase-status.success { background: rgba(57,201,57,0.1); border: 1px solid rgba(57,201,57,0.35); color: var(--success-text); }
        .showcase-btn { background: var(--accent); color: var(--text-on-accent); border: 1px solid var(--accent); border-radius: 6px; padding: 8px 14px; font-family: var(--primary-font); font-weight: 700; cursor: pointer; }
        .showcase-btn.secondary { background: transparent; color: var(--text-color); border-color: var(--border-color); }
        .showcase-btn[disabled] { opacity: .6; cursor: default; }
        .showcase-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 20px; }
        .showcase-modal-backdrop[hidden] { display: none; }
        .showcase-modal { background: var(--surface-1); border: 1px solid var(--border-soft); border-radius: 12px; width: 100%; max-width: 640px; max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; text-align: left; }
        .showcase-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border-faint); }
        .showcase-close { background: transparent; border: 1px solid var(--border-soft); color: var(--text-color); border-radius: 6px; padding: 4px 8px; cursor: pointer; }
        .showcase-modal-body { padding: 14px 16px; overflow: auto; }
        .showcase-guidelines { margin: 0 0 12px 0; padding-left: 1.2em; font-size: .93em; line-height: 1.45; }
        .showcase-language-note { margin: 0 0 10px 0; padding: .55em .8em; border-left: 4px solid #EB6834; background: rgba(235,104,52,.1); border-radius: 4px; font-size: .93em; line-height: 1.45; }
        .showcase-guidelines li { margin: 4px 0; }
        #showcase-form label { display: block; margin: 10px 0 4px 0; font-weight: 700; }
        .showcase-credit-choice { border: 1px solid var(--border-soft); border-radius: 6px; padding: 8px 12px 10px; margin: 12px 0 0 0; }
        .showcase-credit-choice legend { font-weight: 700; padding: 0 6px; }
        #showcase-form .showcase-radio { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-weight: 400; cursor: pointer; }
        #showcase-form .showcase-radio input { width: auto; margin: 0; }
        #showcase-form input, #showcase-form textarea { width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--border-soft); background: var(--surface-inset); color: var(--text-color); font: inherit; }
        .showcase-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
        .showcase-times { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
        .showcase-tutorial { margin: 0 0 14px 0; padding: 10px; border: 1px solid var(--border-soft); border-radius: 8px; background: var(--surface-inset); }
        .showcase-tutorial-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
        .showcase-tutorial video { width: 100%; aspect-ratio: 16 / 9; border-radius: 6px; background: #000; display: block; }