/* Step Navigation */
.step {
    display: none;
}

.step.active {
    display: block;
}

.step-description {
    color: #666;
    font-size: 14px;
    margin-bottom: 16px;
}

.step-nav {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 20px;
}

.step-nav .btn-secondary,
.step-nav .btn-primary {
    width: auto;
    flex: 1;
}

/* Input Tabs */
.input-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 0;
    border-bottom: 1px solid #ddd;
}

.input-tab-btn {
    background: #f0f0f0;
    border: 1px solid #ddd;
    border-bottom: none;
    padding: 10px 16px;
    border-radius: 4px 4px 0 0;
    cursor: pointer;
    font-size: 13px;
    color: #666;
    transition: all 0.2s;
}

.input-tab-btn:hover {
    background: #e8e8e8;
}

.input-tab-btn.active {
    background: #fff;
    color: #333;
    font-weight: bold;
    border-color: #ddd;
    position: relative;
}

.input-tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: #fff;
}

.input-panel {
    display: none;
    background: #fff;
    border: 1px solid #ddd;
    border-top: none;
    padding: 16px;
    border-radius: 0 0 4px 4px;
    margin-bottom: 16px;
}

.input-panel.active {
    display: block;
}

/* Load Profile Actions */
.load-profile-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

.load-divider {
    color: #999;
    font-size: 13px;
}

.btn-upload-profile {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.btn-upload-profile svg {
    flex-shrink: 0;
}

/* Drop Area */
.drop-area {
    border: 2px dashed #ccc;
    border-radius: 8px;
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: #fafafa;
}

.drop-area:hover {
    border-color: #2e7d32;
    background: #f5f5f5;
}

.drop-area.dragover {
    border-color: #2e7d32;
    background: #e8f5e9;
}

.drop-area p {
    margin: 0;
    color: #666;
}

.drop-hint {
    font-size: 12px;
    color: #999;
    margin-top: 8px !important;
}

/* Samples Section */
.samples-section {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #eee;
}

.samples-section h4 {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

#sample-count {
    font-weight: normal;
    color: #888;
    font-size: 13px;
}

.samples-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
}

.sample-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}

.sample-info {
    flex: 1;
    min-width: 0;
}

.sample-source {
    font-weight: 500;
    font-size: 13px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sample-meta {
    font-size: 12px;
    color: #888;
}

.sample-remove {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    padding: 4px 8px;
    font-size: 18px;
    line-height: 1;
}

.sample-remove:hover {
    color: #d32f2f;
}

.sample-stats {
    display: flex;
    gap: 16px;
    margin-top: 12px;
    font-size: 13px;
    color: #666;
}

/* URL Status */
.url-status {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 4px;
    font-size: 13px;
}

.url-status.success {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
}

.url-status.error {
    background: #fce4ec;
    color: #c62828;
    border: 1px solid #f5c6cb;
}

.url-status.loading {
    background: #e3f2fd;
    color: #1565c0;
    border: 1px solid #90caf9;
}

.url-status.warning {
    background: #fff3e0;
    color: #e65100;
    border: 1px solid #ffcc80;
}

/* URL Fetch Progress */
.url-fetch-progress {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.url-fetch-progress .progress-bar {
    flex: 1;
    height: 8px;
    background: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
}

.url-fetch-progress .progress-fill {
    height: 100%;
    background: #2e7d32;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.url-fetch-progress .progress-text {
    font-size: 13px;
    color: #666;
    min-width: 50px;
    text-align: right;
}

/* Profile Section */
.profile-content {
    margin-top: 16px;
}

.profile-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 16px;
}

.profile-score {
    text-align: center;
    min-width: 120px;
}

.profile-label {
    display: block;
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.mastery-level {
    display: block;
    font-size: 20px;
    font-weight: bold;
    color: #2e7d32;
}

.complexity-score {
    display: block;
    font-size: 32px;
    font-weight: bold;
    color: #2e7d32;
}

.profile-meta {
    flex: 1;
}

.technical-level {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 4px;
}

.reading-level {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 4px;
}

.sample-summary {
    display: block;
    font-size: 13px;
    color: #666;
}

/* Profile Metrics Row */
.profile-metrics-row {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px;
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}

.profile-metric {
    flex: 1;
    text-align: center;
    padding: 8px;
    background: #fff;
    border-radius: 6px;
    border: 1px solid #eee;
}

.profile-metric .metric-label {
    display: block;
    font-size: 10px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.profile-metric .metric-value {
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: #1976d2;
}

.profile-metric .metric-value[data-score="high"] {
    color: #2e7d32;
}

.profile-metric .metric-value[data-score="medium"] {
    color: #f57c00;
}

.profile-metric .metric-value[data-score="low"] {
    color: #d32f2f;
}

/* Psychological Metrics Row - distinct styling */
.profile-metrics-row.psychological {
    background: linear-gradient(135deg, #f8f5ff 0%, #f5f8ff 100%);
    border-color: #d8d0f0;
}

.profile-metrics-row.psychological .profile-metric {
    background: rgba(255, 255, 255, 0.8);
    border-color: #e8e0f8;
}

.profile-metrics-row.psychological .metric-label {
    color: #6b5b95;
}

.profile-metrics-row-modal.psychological {
    background: linear-gradient(135deg, #f8f5ff 0%, #f5f8ff 100%);
    border-color: #d8d0f0;
}

.profile-metrics-row-modal.psychological .profile-metric-modal {
    background: rgba(255, 255, 255, 0.8);
    border-color: #e8e0f8;
}

.profile-metrics-row-modal.psychological .metric-label {
    color: #6b5b95;
}

/* Profile Grid */
.profile-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.profile-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 14px;
}

.profile-card h4 {
    font-size: 13px;
    color: #666;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.profile-card p {
    font-size: 14px;
    color: #333;
    margin: 0;
    line-height: 1.5;
}

.profile-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.profile-card li {
    font-size: 13px;
    color: #444;
    padding: 4px 0;
    border-bottom: 1px solid #f0f0f0;
}

.profile-card li:last-child {
    border-bottom: none;
}

/* Profile Section (full width) */
.profile-section {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 14px;
    margin-bottom: 12px;
}

.profile-section h4 {
    font-size: 13px;
    color: #666;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.profile-section p {
    font-size: 14px;
    color: #333;
    line-height: 1.6;
    margin: 0;
}

.profile-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.profile-section li {
    font-size: 13px;
    color: #444;
    padding: 6px 0;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    gap: 8px;
}

.profile-section li:last-child {
    border-bottom: none;
}

.profile-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

/* Generated Content */
.output-section {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #eee;
}

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

.output-header h4 {
    margin: 0;
    flex-shrink: 0;
}

.btn-toggle-output {
    background: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
    color: #666;
    transition: transform 0.2s, background 0.15s;
}

.btn-toggle-output:hover {
    background: #f5f5f5;
}

.btn-toggle-output.collapsed svg {
    transform: rotate(-90deg);
}

.output-body {
    transition: max-height 0.3s ease, opacity 0.2s ease;
}

.output-body.collapsed {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.output-section h4 {
    margin-bottom: 12px;
}

.generated-content {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 16px;
    font-size: 14px;
    line-height: 1.7;
    color: #333;
    white-space: pre-wrap;
    word-wrap: break-word;
    min-height: 100px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.generated-content:focus {
    border-color: #90caf9;
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1);
}

.generated-content[contenteditable="true"]:hover {
    border-color: #90caf9;
}

.edit-hint {
    font-size: 11px;
    color: #9e9e9e;
    margin: 4px 0 8px;
    text-align: right;
}

/* Edit Indicator */
.edit-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    margin-top: 8px;
    background: #fff8e1;
    border: 1px solid #ffcc80;
    border-radius: 6px;
}

.edit-indicator-text {
    flex: 1;
    font-size: 12px;
    color: #e65100;
    font-weight: 500;
}

.btn-save-edits {
    background: #4caf50;
    color: white;
    border-color: #43a047;
}

.btn-save-edits:hover {
    background: #43a047;
}

.btn-discard-edits {
    background: transparent;
    color: #757575;
    border-color: #bdbdbd;
}

.btn-discard-edits:hover {
    background: #f5f5f5;
    color: #616161;
}

/* Regenerate Confirmation Modal */
.regenerate-changes-list {
    list-style: none;
    padding: 0;
    margin: 12px 0;
}

.regenerate-changes-list li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    margin-bottom: 6px;
    background: #f8f9fa;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.4;
}

.change-label {
    font-weight: 600;
    color: #555;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.change-text {
    color: #333;
    font-size: 13px;
}

.change-impact {
    font-size: 11px;
    color: #2e7d32;
    font-weight: 500;
}

.regenerate-confirm-note {
    font-size: 12px;
    color: #6c757d;
    font-style: italic;
    margin-top: 12px;
    margin-bottom: 0;
}

.modal-footer {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 12px 20px 16px;
    border-top: 1px solid #eee;
}

.modal-footer .btn-primary,
.modal-footer .btn-secondary {
    padding: 8px 16px;
    font-size: 13px;
    border-radius: 6px;
    text-align: center;
    cursor: pointer;
    width: auto;
}

.modal-footer .btn-secondary {
    background: transparent;
    border: 1px solid #ddd;
    color: #666;
}

.modal-footer .btn-secondary:hover {
    background: #f5f5f5;
    border-color: #ccc;
}

.modal-footer .btn-primary {
    background: #4caf50;
    border: 1px solid #43a047;
    color: white;
}

.modal-footer .btn-primary:hover {
    background: #43a047;
}

/* Slop Check */
.slop-check {
    margin-top: 16px;
    padding: 12px 14px;
    background: #fff3e0;
    border: 1px solid #ffcc80;
    border-radius: 4px;
}

.slop-check h5 {
    margin: 0 0 8px 0;
    font-size: 13px;
    color: #e65100;
}

.slop-check.clean {
    background: #e8f5e9;
    border-color: #a5d6a7;
}

.slop-check.clean h5 {
    color: #2e7d32;
}

#slop-issues {
    font-size: 13px;
    color: #666;
}

#slop-issues ul {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

#slop-issues li {
    margin-bottom: 4px;
}

/* Trait badges */
.trait-badge {
    display: inline-block;
    background: #e8f5e9;
    color: #2e7d32;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    margin: 2px 4px 2px 0;
}

.trait-badge.neutral {
    background: #f5f5f5;
    color: #666;
}

.trait-badge.highlight {
    background: #fff3e0;
    color: #e65100;
}

/* Metric bar */
.metric-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.metric-label {
    flex: 0 0 100px;
    font-size: 12px;
    color: #666;
}

.metric-track {
    flex: 1;
    height: 6px;
    background: #e0e0e0;
    border-radius: 3px;
    overflow: hidden;
}

.metric-fill {
    height: 100%;
    background: #2e7d32;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.metric-value {
    flex: 0 0 40px;
    text-align: right;
    font-size: 12px;
    font-weight: 500;
    color: #333;
}

/* Responsive */
@media (max-width: 600px) {
    .profile-grid {
        grid-template-columns: 1fr;
    }

    .profile-header {
        flex-direction: column;
        text-align: left;
        align-items: flex-start;
    }

    .profile-score {
        text-align: left;
    }

    /* Profile metrics row - wrap on mobile */
    .profile-metrics-row,
    .profile-metrics-row-modal {
        flex-wrap: wrap;
    }

    .profile-metric,
    .profile-metric-modal {
        flex: 1 1 calc(50% - 6px);
        min-width: calc(50% - 6px);
        max-width: calc(50% - 6px);
    }

    .profile-metrics-row.psychological .profile-metric,
    .profile-metrics-row-modal.psychological .profile-metric-modal {
        flex: 1 1 calc(50% - 6px);
        min-width: calc(50% - 6px);
        max-width: calc(50% - 6px);
    }

    .input-tabs {
        flex-wrap: wrap;
    }

    .input-tab-btn {
        flex: 1;
        min-width: 80px;
        text-align: center;
    }

    .step-nav {
        flex-direction: column;
    }

    .step-nav .btn-secondary,
    .step-nav .btn-primary {
        width: 100%;
    }

    .profile-preview-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .profile-preview-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .slop-score-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .share-primary {
        justify-content: flex-start;
    }

    .btn-row {
        justify-content: flex-start;
    }

    .platform-info {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Profile Preview Bar */
.profile-preview-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f0f7f0;
    border: 1px solid #c8e6c9;
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 13px;
}

.profile-preview-actions {
    display: flex;
    gap: 8px;
}

.btn-ghost {
    background: transparent;
    border: 1px solid #2e7d32;
    color: #2e7d32;
    padding: 4px 10px;
    font-size: 12px;
}

.btn-ghost:hover {
    background: #e8f5e9;
}

/* URL Artifacts */
.url-artifacts {
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 12px 14px;
    margin-bottom: 16px;
}

.url-artifacts h5 {
    margin: 0 0 10px 0;
    font-size: 13px;
    color: #666;
}

.url-artifacts-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.url-artifact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.url-artifact-item:hover {
    background: #f5f5f5;
    border-color: #1976d2;
}

.url-artifact-item .url-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #1976d2;
}

.url-artifact-item .url-status {
    font-size: 12px;
    color: #666;
    padding: 2px 8px;
    border-radius: 10px;
    background: #f0f0f0;
    transition: all 0.15s ease;
}

.url-artifact-item:hover .url-status {
    background: #e3f2fd;
}

.url-artifact-item .url-status.loading {
    color: #f57c00;
    background: #fff3e0;
}

.url-artifact-item .url-status.success {
    color: #2e7d32;
    background: #e8f5e9;
}

.url-artifact-item .url-status.error {
    color: #d32f2f;
    background: #ffebee;
}

/* URL Content Modal */
.url-content-source {
    font-size: 13px;
    color: #666;
    margin-bottom: 12px;
}

.url-content-source a {
    color: #1976d2;
    word-break: break-all;
}

.url-content-wrapper {
    margin-bottom: 12px;
}

.url-content-wrapper textarea {
    width: 100%;
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 12px;
    line-height: 1.5;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fafafa;
    resize: vertical;
}

.url-content-wrapper textarea:focus {
    outline: none;
    border-color: #1976d2;
    background: #fff;
}

.url-content-hint {
    font-size: 12px;
    color: #888;
    margin-bottom: 16px;
}

/* GitHub Artifacts */
.github-artifacts {
    background: #f6f8fa;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    padding: 12px 14px;
    margin-bottom: 16px;
}

.github-artifacts h5 {
    margin: 0 0 10px 0;
    font-size: 13px;
    color: #24292f;
    display: flex;
    align-items: center;
}

.github-artifacts-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.github-artifact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid #d0d7de;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.github-artifact-item:hover {
    background: #f6f8fa;
    border-color: #1976d2;
}

.github-artifact-item .repo-name {
    flex: 1;
    font-weight: 500;
    color: #0969da;
}

.github-artifact-item .repo-details {
    font-size: 12px;
    color: #57606a;
}

/* Style Builder */
.style-builder {
    background: linear-gradient(135deg, #f5f5f5 0%, #fafafa 100%);
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 12px 14px;
    margin-bottom: 16px;
}

.style-builder h5 {
    margin: 0 0 10px 0;
    font-size: 13px;
    color: #666;
}

.style-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.style-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 16px;
    font-size: 12px;
    color: #555;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
}

.style-tag:hover {
    border-color: #2e7d32;
    color: #2e7d32;
}

.style-tag.active {
    background: #e8f5e9;
    border-color: #2e7d32;
    color: #2e7d32;
}

.style-tag .tag-remove {
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 10px;
    background: rgba(0,0,0,0.1);
    color: inherit;
}

.style-tag .tag-remove:hover {
    background: rgba(0,0,0,0.2);
}

.style-hint {
    margin-top: 8px;
    font-size: 11px;
    color: #888;
    width: 100%;
}

.style-sketch-empty {
    font-size: 12px;
    color: #999;
    font-style: italic;
}

.btn-style-studio {
    background: none;
    border: 1px dashed #2e7d32;
    color: #2e7d32;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-style-studio:hover {
    background: #e8f5e9;
    border-style: solid;
}

/* Style Sketch Studio Modal */
.style-studio-content {
    max-height: 60vh;
    overflow-y: auto;
}

.style-studio-section {
    margin-bottom: 20px;
}

.style-studio-section h4 {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: #333;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
}

.style-studio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.style-studio-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

.style-studio-item:hover {
    background: #f5f5f5;
    border-color: #ccc;
}

.style-studio-item.active {
    background: #e8f5e9;
    border-color: #2e7d32;
}

.style-studio-item .style-check {
    width: 18px;
    height: 18px;
    border: 2px solid #ccc;
    border-radius: 4px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

.style-studio-item.active .style-check {
    background: #2e7d32;
    border-color: #2e7d32;
    color: #fff;
}

.style-studio-item .style-info {
    flex: 1;
}

.style-studio-item .style-name {
    font-weight: 500;
    font-size: 13px;
    color: #333;
    margin-bottom: 4px;
}

.style-studio-item .style-desc {
    font-size: 11px;
    color: #666;
    line-height: 1.4;
}

.style-studio-feedback {
    margin-top: 16px;
}

.style-studio-feedback label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    color: #333;
}

.style-studio-feedback textarea {
    width: 100%;
    min-height: 80px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    resize: vertical;
}

.style-studio-footer {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding-top: 14px;
    border-top: 1px solid #eee;
    margin-top: 14px;
}

.style-studio-footer .btn-primary,
.style-studio-footer .btn-secondary {
    padding: 8px 16px;
    font-size: 13px;
    border-radius: 6px;
    text-align: center;
    cursor: pointer;
    width: auto;
}

.style-studio-footer .btn-secondary {
    background: transparent;
    border: 1px solid #ddd;
    color: #666;
}

.style-studio-footer .btn-secondary:hover {
    background: #f5f5f5;
    border-color: #ccc;
}

.style-studio-footer .btn-primary {
    background: #4caf50;
    border: 1px solid #43a047;
    color: white;
}

.style-studio-footer .btn-primary:hover {
    background: #43a047;
}

/* Mobile adjustments for modal footers */
@media (max-width: 360px) {
    .style-studio-footer {
        flex-direction: column;
    }
    
    .style-studio-footer button {
        width: 100%;
    }
    
    .modal-footer {
        flex-direction: column;
    }
    
    .modal-footer button {
        width: 100%;
    }
}

/* Style Preview Section */
.style-preview-section {
    margin-top: 20px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.style-preview-section h4 {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: #495057;
}

.style-preview-metrics {
    max-height: 200px;
    overflow-y: auto;
}

.style-impact-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.style-impact-row {
    display: grid;
    grid-template-columns: 100px 1fr 50px;
    align-items: center;
    gap: 10px;
}

.impact-label {
    font-size: 12px;
    color: #6c757d;
    font-weight: 500;
}

.impact-bar-container {
    height: 8px;
    background: #e9ecef;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.impact-bar {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.impact-bar.impact-positive {
    background: linear-gradient(90deg, #81c784, #4caf50);
    margin-left: auto;
}

.impact-bar.impact-negative {
    background: linear-gradient(90deg, #ef5350, #e57373);
}

.impact-value {
    font-size: 12px;
    font-weight: 600;
    text-align: right;
}

.impact-value.impact-positive {
    color: #2e7d32;
}

.impact-value.impact-negative {
    color: #c62828;
}

.impact-value.impact-neutral {
    color: #757575;
}

/* Style Diff Mode */
.style-diff-notice {
    font-size: 12px;
    color: #6c757d;
    margin: 0 0 12px 0;
    font-style: italic;
}

.style-diff-row {
    grid-template-columns: 100px 1fr 60px;
}

.impact-change {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.impact-old {
    color: #9e9e9e;
    text-decoration: line-through;
}

.impact-arrow {
    color: #6c757d;
}

.impact-new {
    font-weight: 600;
}

.impact-new.impact-positive {
    color: #2e7d32;
}

.impact-new.impact-negative {
    color: #c62828;
}

.impact-delta {
    font-size: 12px;
    font-weight: 600;
    text-align: right;
}

.impact-delta.impact-positive {
    color: #2e7d32;
}

.impact-delta.impact-negative {
    color: #c62828;
}

.no-style-changes {
    font-size: 12px;
    color: #9e9e9e;
    text-align: center;
    padding: 12px;
    margin: 0;
}

/* Feedback History Section */
.feedback-history-section {
    margin-top: 16px;
    padding: 14px;
    background: #fafafa;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.feedback-history-section h4 {
    margin: 0 0 10px 0;
    font-size: 13px;
    font-weight: 600;
    color: #495057;
    display: flex;
    align-items: center;
    gap: 6px;
}

.feedback-count {
    font-size: 11px;
    color: #6c757d;
    font-weight: 500;
}

.feedback-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 150px;
    overflow-y: auto;
}

.feedback-history-item {
    padding: 10px 12px;
    background: #fff;
    border-radius: 6px;
    border: 1px solid #e9ecef;
    font-size: 12px;
}

.feedback-history-item.latest {
    border-color: #90caf9;
    background: #f8fbff;
}

.feedback-text {
    color: #333;
    line-height: 1.4;
    font-style: italic;
}

.feedback-meta {
    display: flex;
    gap: 12px;
    margin-top: 6px;
    font-size: 11px;
    color: #9e9e9e;
}

.feedback-styles {
    color: #6c757d;
}

.feedback-change {
    font-weight: 600;
}

.feedback-change.positive {
    color: #2e7d32;
}

.feedback-change.negative {
    color: #c62828;
}

/* View Feedback Button */
.btn-view-feedback {
    background: #e3f2fd;
    color: #1565c0;
    border-color: #90caf9;
}

.btn-view-feedback:hover {
    background: #bbdefb;
    border-color: #64b5f6;
}

/* Modal Variations */
.modal-small {
    max-width: 400px;
}

.modal-small .modal-body {
    padding: 16px 20px;
}

.modal-small .modal-body p {
    margin-bottom: 8px;
    font-size: 13px;
}

.modal-small .modal-footer {
    padding: 12px 20px 16px;
}

.modal-medium {
    max-width: 560px;
}

.modal-large {
    max-width: 800px;
    max-height: 90vh;
}

.modal-large .modal-body {
    max-height: calc(90vh - 80px);
    overflow-y: auto;
}

/* Quality Tip on Input Step */
.quality-tip {
    background: #f5f5f5;
    padding: 10px 14px;
    font-size: 13px;
    color: #555;
    margin-bottom: 16px;
    border-radius: 4px;
}

.quality-tip strong {
    color: #333;
}

.quality-tip .quality-excellent {
    color: #2e7d32;
    font-weight: bold;
}

/* Professional Style Override Modal */
.prof-style-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 16px 0;
    padding: 12px;
    background: #f9f9f9;
    border-radius: 6px;
}

.checkbox-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
}

.checkbox-option input[type="checkbox"] {
    margin-top: 2px;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.checkbox-option span {
    line-height: 1.4;
}

.modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.modal-actions .btn-primary,
.modal-actions .btn-secondary {
    flex: 1;
}

/* Quick Profile Content */
#quick-profile-content {
    max-height: 300px;
    overflow-y: auto;
}

#quick-profile-content .profile-summary {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 16px;
}

#quick-profile-content .profile-traits {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

/* Full Profile Modal Content */
#full-profile-content {
    max-height: 60vh;
    overflow-y: auto;
}

/* Profile Modal Header */
.profile-header-modal {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 16px;
}

.profile-score-modal {
    text-align: center;
    min-width: 120px;
}

.profile-score-modal .profile-label {
    display: block;
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.profile-score-modal .complexity-score,
.profile-score-modal .mastery-level {
    display: block;
    font-size: 20px;
    font-weight: bold;
    color: #2e7d32;
}

.profile-meta-modal {
    flex: 1;
}

.profile-meta-modal .technical-level {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 4px;
}

/* Profile Metrics Row in Modal */
.profile-metrics-row-modal {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px;
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    flex-wrap: wrap;
}

.profile-metric-modal {
    flex: 1;
    text-align: center;
    padding: 8px;
    background: #fff;
    border-radius: 6px;
    border: 1px solid #eee;
    min-width: 100px;
}

.profile-metric-modal .metric-label {
    display: block;
    font-size: 10px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.profile-metric-modal .metric-value {
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: #1976d2;
}

.profile-metric-modal .metric-value[data-score="high"] {
    color: #2e7d32;
}

.profile-metric-modal .metric-value[data-score="medium"] {
    color: #f9a825;
}

.profile-metric-modal .metric-value[data-score="low"] {
    color: #c62828;
}

.profile-summary-modal {
    font-size: 14px;
    line-height: 1.6;
    color: #444;
    margin-bottom: 16px;
}

/* Profile Grid in Modal */
.profile-grid-modal {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.profile-card-modal {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 14px;
}

.profile-card-modal h4 {
    font-size: 13px;
    color: #666;
    margin: 0 0 10px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.profile-card-modal p {
    font-size: 14px;
    color: #333;
    line-height: 1.5;
    margin: 8px 0 0;
}

.profile-card-modal .trait-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Profile Sections in Modal */
.profile-section-modal {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 14px;
    margin-bottom: 12px;
}

.profile-section-modal:last-child {
    margin-bottom: 0;
}

.profile-section-modal h4 {
    font-size: 13px;
    color: #666;
    margin: 0 0 10px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.profile-section-modal ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
    color: #444;
    line-height: 1.6;
}

.profile-section-modal li {
    padding: 4px 0;
    border-bottom: 1px solid #f0f0f0;
}

.profile-section-modal li:last-child {
    border-bottom: none;
}

.profile-section-modal p {
    font-size: 14px;
    color: #333;
    line-height: 1.6;
    margin: 0;
}

#full-profile-content .profile-section {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 14px;
    margin-bottom: 12px;
}

#full-profile-content .profile-section:last-child {
    margin-bottom: 0;
}

#full-profile-content .profile-section h4 {
    font-size: 13px;
    color: #666;
    margin: 0 0 10px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#full-profile-content .profile-section p {
    font-size: 14px;
    color: #333;
    line-height: 1.5;
    margin: 0;
}

#full-profile-content .profile-metrics {
    display: flex;
    gap: 24px;
}

#full-profile-content .metric {
    font-size: 14px;
}

#full-profile-content .metric-label {
    color: #666;
}

#full-profile-content .trait-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Saved Profile Banner */
.saved-profile-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #e8f5e9;
    border: 1px solid #a5d6a7;
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

.saved-profile-banner .banner-text {
    font-size: 14px;
    color: #2e7d32;
}

.saved-profile-banner .banner-actions {
    display: flex;
    gap: 8px;
}

.btn-text {
    background: transparent;
    border: none;
    color: #1976d2;
    font-size: 13px;
    cursor: pointer;
    padding: 4px 8px;
}

.btn-text:hover {
    text-decoration: underline;
}

.btn-text.danger {
    color: #d32f2f;
}

/* Similar Authors Section */
.similar-authors {
    background: linear-gradient(135deg, #f8f4ff 0%, #f0f7ff 100%);
    border: 1px solid #d8d0f0;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

.similar-authors-header {
    margin-bottom: 12px;
}

.similar-authors-label {
    font-size: 11px;
    font-weight: 600;
    color: #6b5b95;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.similar-authors-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.similar-authors-loading {
    font-size: 13px;
    color: #888;
    font-style: italic;
}

.similar-author-card {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 6px;
    padding: 12px;
    border: 1px solid #e8e0f8;
}

.similar-author-main {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
}

.similar-author-name {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.similar-author-genre {
    font-size: 12px;
    color: #6b5b95;
    background: rgba(107, 91, 149, 0.1);
    padding: 2px 8px;
    border-radius: 10px;
}

.similar-author-traits {
    font-size: 13px;
    margin-bottom: 8px;
    color: #555;
}

.similar-author-traits .traits-label {
    color: #888;
}

.similar-author-traits .traits-list {
    color: #6b5b95;
    font-weight: 500;
}

.similar-author-desc {
    font-size: 12px;
    color: #666;
    line-height: 1.5;
    font-style: italic;
}

/* Similar Author Compact (Quick View) */
.similar-authors-compact-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
    padding: 10px 12px;
    background: linear-gradient(135deg, #f8f4ff 0%, #f0f7ff 100%);
    border-radius: 6px;
}

.similar-authors-compact-list::before {
    content: 'You write like';
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.similar-author-compact-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
}

.similar-author-compact-item strong {
    color: #4a3f6b;
}

.similar-author-compact-item .compact-traits {
    color: #6b5b95;
}

/* Tooltip System */
[data-tooltip] {
    position: relative;
    cursor: help;
    border-bottom: 1px dotted currentColor;
}

[data-tooltip]::before,
[data-tooltip]::after {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 1000;
}

[data-tooltip]::before {
    content: attr(data-tooltip);
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 12px;
    background: #333;
    color: #fff;
    font-size: 12px;
    font-weight: normal;
    line-height: 1.4;
    white-space: normal;
    max-width: 250px;
    min-width: 150px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    text-align: left;
}

[data-tooltip]::after {
    content: '';
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #333;
}

[data-tooltip]:hover::before,
[data-tooltip]:hover::after {
    visibility: visible;
    opacity: 1;
}

/* Tooltip positioned below (for elements near top of viewport) */
.similar-authors-modal [data-tooltip]::before {
    bottom: auto;
    top: calc(100% + 8px);
}

.similar-authors-modal [data-tooltip]::after {
    bottom: auto;
    top: calc(100% + 2px);
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Similar Authors in Modal */
.similar-authors-modal {
    margin-bottom: 16px;
}

.similar-authors-modal .similar-authors {
    background: linear-gradient(135deg, #f8f4ff 0%, #f0f7ff 100%);
    border: 1px solid #d8d0f0;
    border-radius: 8px;
    padding: 16px;
}

/* Profile Quality Metric */
.profile-quality {
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

.profile-quality .quality-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.profile-quality .quality-label {
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

.profile-quality .quality-score {
    font-size: 14px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
}

.profile-quality .quality-score.exceptional {
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
    color: #1b5e20;
    font-weight: 600;
}

.profile-quality .quality-score.excellent {
    background: #e8f5e9;
    color: #2e7d32;
}

.profile-quality .quality-score.good {
    background: #e3f2fd;
    color: #1565c0;
}

.profile-quality .quality-score.fair {
    background: #fff3e0;
    color: #e65100;
}

.profile-quality .quality-score.needs-more {
    background: #fce4ec;
    color: #c62828;
}

.profile-quality .quality-score.insufficient {
    background: #ffebee;
    color: #b71c1c;
}

.profile-quality .quality-bar {
    height: 6px;
    background: #e0e0e0;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 10px;
}

.profile-quality .quality-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease, background 0.3s ease;
}

.profile-quality .quality-fill.exceptional {
    background: linear-gradient(90deg, #2e7d32, #1b5e20);
}

.profile-quality .quality-fill.excellent {
    background: #2e7d32;
}

.profile-quality .quality-fill.good {
    background: #1565c0;
}

.profile-quality .quality-fill.fair {
    background: #f57c00;
}

.profile-quality .quality-fill.needs-more {
    background: #d32f2f;
}

.profile-quality .quality-fill.insufficient {
    background: #b71c1c;
}

.profile-quality .quality-suggestion {
    font-size: 13px;
    color: #666;
    margin: 0;
}

/* Platform Detection */
.platform-artifacts {
    background: #e3f2fd;
    border: 1px solid #90caf9;
    border-radius: 6px;
    padding: 12px 14px;
    margin-bottom: 16px;
}

.platform-artifacts h5 {
    margin: 0 0 10px 0;
    font-size: 13px;
    color: #1565c0;
}

.platform-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.platform-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #fff;
    border: 1px solid #64b5f6;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 500;
    color: #1565c0;
}

.platform-badge .platform-icon {
    font-size: 16px;
}

.platform-hint {
    font-size: 12px;
    color: #666;
    flex: 1;
}

.btn-dismiss-platform {
    background: none;
    border: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 16px;
    line-height: 1;
    color: #999;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.btn-dismiss-platform:hover {
    background: rgba(0,0,0,0.1);
    color: #666;
}

/* Button Variants */
.btn-primary-small {
    background: #2e7d32;
    color: #fff;
    border: none;
}

.btn-primary-small:hover {
    background: #1b5e20;
}

/* Storage Info */
.storage-info {
    background: #f5f5f5;
    border-radius: 6px;
    padding: 12px 14px;
    margin-top: 12px;
}

.storage-info h5 {
    margin: 0 0 8px 0;
    font-size: 13px;
    color: #333;
}

.storage-info ul {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    color: #666;
    line-height: 1.6;
}

.storage-info li {
    margin-bottom: 4px;
}

/* Share Buttons */
.share-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #eee;
}

.share-primary {
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-share {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-share:hover {
    background: #f5f5f5;
    transform: translateY(-1px);
}

.btn-share svg {
    flex-shrink: 0;
}

.btn-share-x:hover {
    background: #000;
    color: #fff;
    border-color: #000;
}

.btn-share-linkedin:hover {
    background: #0077b5;
    color: #fff;
    border-color: #0077b5;
}

.btn-share-facebook:hover {
    background: #1877f2;
    color: #fff;
    border-color: #1877f2;
}

.btn-share-reddit:hover {
    background: #ff4500;
    color: #fff;
    border-color: #ff4500;
}

.btn-share-instagram:hover {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    color: #fff;
    border-color: #dc2743;
}

.btn-share-threads:hover {
    background: #000;
    color: #fff;
    border-color: #000;
}

.btn-show-more {
    font-size: 12px;
    color: #666;
    padding: 4px 8px;
}

.btn-show-more:hover {
    color: #333;
}

.share-all-platforms {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 8px;
    margin-top: 4px;
    border-top: 1px dashed #eee;
    width: 100%;
}

/* Whodoneit Button */
.whodoneit-link {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #eee;
}

.btn-whodoneit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    padding: 8px 14px;
}

.btn-whodoneit svg {
    flex-shrink: 0;
}

/* Platform Icon in Detection */
.platform-icon {
    display: inline-flex;
    align-items: center;
}

.platform-icon svg {
    width: 16px;
    height: 16px;
}

/* Clear Profile / Danger Ghost Button */
.btn-danger-ghost {
    color: #c62828;
}

.btn-danger-ghost:hover {
    background: rgba(198, 40, 40, 0.1);
    color: #b71c1c;
}

.btn-danger {
    background: #c62828;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.15s ease;
}

.btn-danger:hover {
    background: #b71c1c;
}

/* Slop Score Badge */
.slop-score-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.slop-score-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.slop-score-badge.excellent {
    background: #e8f5e9;
    color: #2e7d32;
}

.slop-score-badge.good {
    background: #e3f2fd;
    color: #1565c0;
}

.slop-score-badge.fair {
    background: #fff3e0;
    color: #e65100;
}

.slop-score-badge.poor {
    background: #ffebee;
    color: #c62828;
}

.slop-category {
    margin-top: 12px;
}

.slop-category-header {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 6px 0;
}

.slop-category-header:hover {
    color: #1565c0;
}

.slop-category-title {
    font-weight: 500;
    font-size: 13px;
    text-transform: capitalize;
}

.slop-category-count {
    font-size: 12px;
    color: #666;
}

.slop-category-items {
    padding-left: 16px;
    margin-top: 6px;
}

.slop-category-items li {
    font-size: 13px;
    color: #666;
    margin-bottom: 4px;
}

.slop-severity-critical {
    color: #c62828;
}

.slop-severity-high {
    color: #e65100;
}

.slop-severity-medium {
    color: #f9a825;
}

.slop-severity-low {
    color: #666;
}

/* Toast Notifications */
.toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 12px 24px;
    border-radius: 4px;
    font-size: 14px;
    z-index: 10000;
    animation: toast-in 0.3s ease;
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translate(-50%, 20px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

/* Revision History Button */
.btn-revision-history {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    color: #666;
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-right: 8px;
}

.btn-revision-history:hover {
    background: #f0f0f0;
    color: #333;
}

.btn-revision-history svg {
    transition: transform 0.2s ease;
}

.btn-revision-history:hover svg {
    transform: rotate(-30deg);
}

/* Revision History List */
.revision-history-intro {
    color: #666;
    font-size: 14px;
    margin-bottom: 12px;
}

.revision-history-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 400px;
    overflow-y: auto;
}

.revision-item {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px;
    background: #fafafa;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.revision-item:hover {
    border-color: #bbdefb;
    background: #f5f9ff;
}

.revision-item.current {
    border-color: #4caf50;
    background: #e8f5e9;
}

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

.revision-time {
    font-size: 12px;
    font-weight: 600;
    color: #666;
}

.revision-item.current .revision-time {
    color: #2e7d32;
}

.revision-words {
    font-size: 11px;
    color: #999;
}

.revision-preview {
    font-size: 13px;
    color: #444;
    line-height: 1.4;
    margin-bottom: 8px;
    word-break: break-word;
}

.revision-styles {
    font-size: 11px;
    color: #888;
    margin-bottom: 8px;
}

.revision-item .btn-restore {
    margin-top: 4px;
}

/* Modal Size Consistency */
@media (min-width: 481px) {
    .modal-small {
        width: 420px;
        max-width: 90vw;
    }
}

@media (max-width: 480px) {
    .revision-history-list {
        max-height: 300px;
    }
    
    .revision-item {
        padding: 10px;
    }
}
/* Feedback Modal */
.feedback-modal-intro {
    color: #666;
    font-size: 14px;
    margin-bottom: 12px;
}

.feedback-modal-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 400px;
    overflow-y: auto;
}

.feedback-modal-item {
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
}

.feedback-modal-item.latest {
    background: #e3f2fd;
}

.feedback-modal-text {
    font-size: 14px;
    color: #333;
    font-style: italic;
    margin-bottom: 8px;
    line-height: 1.4;
}

.feedback-modal-meta {
    display: flex;
    gap: 12px;
    font-size: 11px;
}

.feedback-modal-meta .feedback-time {
    color: #888;
}

.feedback-modal-meta .feedback-styles {
    color: #666;
}

.feedback-modal-meta .feedback-change {
    font-weight: 500;
}

.feedback-modal-meta .feedback-change.positive {
    color: #2e7d32;
}

.feedback-modal-meta .feedback-change.negative {
    color: #c62828;
}

.no-feedback {
    color: #888;
    font-style: italic;
    text-align: center;
    padding: 20px;
}