/* ========================================
   M3 Tool Page Styles
   Material Design 3 Expressive for Tool Pages
   ======================================== */

/* ========================================
   ROOT VARIABLES
   ======================================== */
:root {
    --m3-primary: #4f46e5;
    --m3-primary-container: #e0e7ff;
    --m3-on-primary: white;
    --m3-surface: #fafafa;
    --m3-surface-variant: #f1f5f9;
    --m3-on-surface: #1e293b;
    --m3-on-surface-variant: #64748b;
    --m3-outline: #cbd5e1;
    --m3-outline-variant: #e2e8f0;
    --m3-tertiary: #0ea5e9;
    --m3-tertiary-container: #e0f2fe;
    --m3-success: #10b981;
    --m3-success-container: #d1fae5;
    --m3-error: #ef4444;

    --m3-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --m3-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --m3-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --m3-shadow-elevated: 0 12px 32px rgba(79, 70, 229, 0.15);

    --m3-radius-sm: 8px;
    --m3-radius-md: 12px;
    --m3-radius-lg: 16px;
    --m3-radius-xl: 24px;
    --m3-radius-full: 9999px;

    --m3-ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --m3-ease-emphasized: cubic-bezier(0.4, 0, 0, 1);
    --m3-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ========================================
   TOOL CONTAINER
   ======================================== */
.m3-tool-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 1.5rem;
    min-height: calc(100vh - 160px);
}

.m3-tool-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-top: 1rem;
}

.m3-tool-title {
    font-family: 'Roboto Flex', 'Inter', system-ui, sans-serif;
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    font-weight: 700;
    color: var(--m3-on-surface);
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

.m3-tool-subtitle {
    font-size: 1rem;
    color: var(--m3-on-surface-variant);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ========================================
   STAGE CONTAINER
   ======================================== */
.m3-stage {
    animation: m3-stage-enter 0.4s var(--m3-ease-spring);
}

@keyframes m3-stage-enter {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   UPLOAD STAGE
   ======================================== */
.m3-upload-area {
    border: 2px dashed var(--m3-outline);
    border-radius: var(--m3-radius-xl);
    padding: 3rem 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s var(--m3-ease-standard);
    background: var(--m3-surface);
    position: relative;
    overflow: hidden;
}

.m3-upload-area::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--m3-primary-container) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s;
}

.m3-upload-area:hover {
    border-color: var(--m3-primary);
    transform: translateY(-4px);
    box-shadow: var(--m3-shadow-lg);
}

.m3-upload-area:hover::before {
    opacity: 0.3;
}

.m3-upload-area.drag-over {
    border-color: var(--m3-primary);
    background: var(--m3-primary-container);
    box-shadow: var(--m3-shadow-elevated);
    transform: scale(1.02);
}

.m3-upload-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--m3-primary), var(--m3-tertiary));
    border-radius: var(--m3-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: white;
    font-size: 2.5rem;
    box-shadow: var(--m3-shadow-md);
    animation: m3-icon-pulse 2s ease-in-out infinite;
}

@keyframes m3-icon-pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

.m3-upload-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--m3-on-surface);
    margin-bottom: 0.5rem;
}

.m3-upload-desc {
    color: var(--m3-on-surface-variant);
    margin-bottom: 1.5rem;
    font-size: 1rem;
}

.m3-btn-upload {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    background: linear-gradient(135deg, var(--m3-primary), #6366f1);
    color: white;
    border: none;
    border-radius: var(--m3-radius-full);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: var(--m3-shadow-md);
    transition: all 0.3s var(--m3-ease-spring);
}

.m3-btn-upload:hover {
    transform: translateY(-2px);
    box-shadow: var(--m3-shadow-elevated);
}

.m3-btn-upload:active {
    transform: translateY(0);
}

.m3-upload-note {
    margin-top: 1.25rem;
    font-size: 0.875rem;
    color: var(--m3-on-surface-variant);
}

/* ========================================
   SETTINGS STAGE
   ======================================== */
.m3-settings-panel {
    background: white;
    border-radius: var(--m3-radius-xl);
    padding: 2rem;
    box-shadow: var(--m3-shadow-md);
    border: 1px solid var(--m3-outline-variant);
}

.m3-settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--m3-outline-variant);
}

.m3-settings-title {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--m3-on-surface);
}

.m3-btn-add-more {
    padding: 0.5rem 1rem;
    background: var(--m3-primary-container);
    border: none;
    border-radius: var(--m3-radius-full);
    color: var(--m3-primary);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.m3-btn-add-more:hover {
    background: var(--m3-primary);
    color: white;
}

/* File Cards Grid */
.m3-file-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.m3-file-card {
    background: var(--m3-surface);
    border: 2px solid var(--m3-outline-variant);
    border-radius: var(--m3-radius-lg);
    padding: 1rem;
    transition: all 0.3s var(--m3-ease-spring);
    cursor: grab;
    animation: m3-card-enter 0.3s var(--m3-ease-spring) backwards;
}

.m3-file-card:hover {
    border-color: var(--m3-primary);
    box-shadow: var(--m3-shadow-md);
    transform: translateY(-4px);
}

@keyframes m3-card-enter {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
}

.m3-file-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.m3-drag-handle {
    color: var(--m3-on-surface-variant);
    cursor: grab;
    padding: 0.25rem;
    border-radius: 4px;
    transition: all 0.2s;
}

.m3-drag-handle:hover {
    background: var(--m3-primary-container);
    color: var(--m3-primary);
}

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

.m3-file-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--m3-on-surface);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.m3-file-meta {
    font-size: 0.8rem;
    color: var(--m3-on-surface-variant);
}

.m3-btn-remove {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--m3-on-surface-variant);
    border-radius: var(--m3-radius-sm);
    cursor: pointer;
    transition: all 0.2s;
}

.m3-btn-remove:hover {
    background: #fee2e2;
    color: var(--m3-error);
}

.m3-file-preview {
    width: 100%;
    aspect-ratio: 3/4;
    background: var(--m3-surface-variant);
    border-radius: var(--m3-radius-md);
    overflow: hidden;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.m3-file-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.m3-file-actions {
    display: flex;
    gap: 0.5rem;
}

.m3-btn-action {
    flex: 1;
    padding: 0.625rem;
    border: 1px solid var(--m3-outline-variant);
    background: white;
    color: var(--m3-on-surface-variant);
    border-radius: var(--m3-radius-sm);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    font-size: 0.875rem;
}

.m3-btn-action:hover {
    border-color: var(--m3-primary);
    background: var(--m3-primary-container);
    color: var(--m3-primary);
}

/* Primary Action Button */
.m3-btn-primary {
    width: 100%;
    padding: 1rem 2rem;
    margin-top: 2rem;
    background: linear-gradient(135deg, var(--m3-primary), #6366f1);
    color: white;
    border: none;
    border-radius: var(--m3-radius-lg);
    font-weight: 600;
    font-size: 1.125rem;
    cursor: pointer;
    box-shadow: var(--m3-shadow-md);
    transition: all 0.3s var(--m3-ease-spring);
}

.m3-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--m3-shadow-elevated);
}

.m3-btn-primary:active {
    transform: translateY(0);
}

/* ========================================
   PROCESSING STAGE
   ======================================== */
.m3-processing-stage {
    text-align: center;
    padding: 3rem 2rem;
    background: white;
    border-radius: var(--m3-radius-xl);
    box-shadow: var(--m3-shadow-md);
}

.m3-processing-animation {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    margin: 2rem 0;
    height: 120px;
}

.m3-processing-files {
    position: relative;
    width: 80px;
    height: 100px;
}

.m3-processing-file {
    position: absolute;
    width: 60px;
    height: 80px;
    background: linear-gradient(135deg, var(--m3-primary), #6366f1);
    border-radius: var(--m3-radius-sm);
}

.m3-processing-file:nth-child(1) {
    animation: m3-stack1 2s ease-in-out infinite;
}

.m3-processing-file:nth-child(2) {
    animation: m3-stack2 2s ease-in-out infinite;
}

.m3-processing-file:nth-child(3) {
    animation: m3-stack3 2s ease-in-out infinite;
}

@keyframes m3-stack1 {

    0%,
    100% {
        transform: translate(-12px, 8px);
        opacity: 0.5;
    }

    50% {
        transform: translate(0, 0);
        opacity: 1;
    }
}

@keyframes m3-stack2 {

    0%,
    100% {
        transform: translate(-6px, 4px);
        opacity: 0.7;
    }

    50% {
        transform: translate(0, 0);
        opacity: 1;
    }
}

@keyframes m3-stack3 {

    0%,
    100% {
        transform: translate(0, 0);
        opacity: 0.9;
    }

    50% {
        transform: translate(0, 0);
        opacity: 1;
    }
}

.m3-processing-arrow {
    font-size: 2rem;
    color: var(--m3-primary);
    animation: m3-arrow-pulse 1.5s ease-in-out infinite;
}

@keyframes m3-arrow-pulse {

    0%,
    100% {
        opacity: 0.4;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

.m3-processing-result {
    width: 90px;
    height: 110px;
    background: linear-gradient(135deg, var(--m3-success), #059669);
    border-radius: var(--m3-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2.5rem;
    animation: m3-result-glow 1s ease-in-out infinite alternate;
}

@keyframes m3-result-glow {
    from {
        box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
    }

    to {
        box-shadow: 0 0 40px rgba(16, 185, 129, 0.6);
    }
}

.m3-processing-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--m3-on-surface);
    margin-bottom: 0.5rem;
}

.m3-processing-status {
    color: var(--m3-on-surface-variant);
    margin-bottom: 1.5rem;
}

.m3-progress-bar {
    width: 100%;
    max-width: 400px;
    height: 8px;
    background: var(--m3-surface-variant);
    border-radius: var(--m3-radius-full);
    margin: 1.5rem auto;
    overflow: hidden;
}

.m3-progress-fill {
    height: 100%;
    background: linear-gradient(135deg, var(--m3-primary), var(--m3-tertiary));
    border-radius: var(--m3-radius-full);
    transition: width 0.3s var(--m3-ease-standard);
    width: 0%;
    position: relative;
}

.m3-progress-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: m3-shimmer 1.5s infinite;
}

@keyframes m3-shimmer {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(100%);
    }
}

/* ========================================
   DOWNLOAD/SUCCESS STAGE
   ======================================== */
.m3-download-stage {
    text-align: center;
    padding: 3rem 2rem;
    background: white;
    border-radius: var(--m3-radius-xl);
    box-shadow: var(--m3-shadow-md);
}

.m3-success-icon {
    width: 80px;
    height: 80px;
    background: var(--m3-success-container);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: var(--m3-success);
    font-size: 2.5rem;
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.3);
    animation: m3-success-bounce 0.6s var(--m3-ease-spring);
}

@keyframes m3-success-bounce {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.m3-success-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--m3-on-surface);
    margin-bottom: 0.5rem;
}

.m3-success-message {
    color: var(--m3-on-surface-variant);
    margin-bottom: 2rem;
}

.m3-stats-grid {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin: 2rem 0;
    flex-wrap: wrap;
}

.m3-stat {
    text-align: center;
    padding: 1.5rem 2rem;
    background: var(--m3-surface);
    border-radius: var(--m3-radius-lg);
}

.m3-stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--m3-primary);
    display: block;
}

.m3-stat-label {
    font-size: 0.875rem;
    color: var(--m3-on-surface-variant);
    margin-top: 0.25rem;
}

.m3-btn-download {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 3rem;
    background: linear-gradient(135deg, var(--m3-success), #059669);
    color: white;
    border: none;
    border-radius: var(--m3-radius-full);
    font-weight: 600;
    font-size: 1.125rem;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
    transition: all 0.3s var(--m3-ease-spring);
    margin-bottom: 1rem;
}

.m3-btn-download:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4);
}

.m3-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    background: white;
    color: var(--m3-on-surface);
    border: 1px solid var(--m3-outline);
    border-radius: var(--m3-radius-full);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.m3-btn-secondary:hover {
    border-color: var(--m3-primary);
    color: var(--m3-primary);
    background: var(--m3-primary-container);
}

/* ========================================
   SORTABLE STATES
   ======================================== */
.sortable-ghost .m3-file-card {
    opacity: 0.4;
}

.sortable-chosen .m3-file-card {
    border-color: var(--m3-primary) !important;
    box-shadow: var(--m3-shadow-elevated) !important;
}

.sortable-drag {
    opacity: 1;
    transform: rotate(3deg);
}

/* ========================================
   ACCESSIBILITY
   ======================================== */
.m3-skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--m3-primary);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0 0 var(--m3-radius-md) 0;
    z-index: 10000;
    font-weight: 600;
}

.m3-skip-link:focus {
    top: 0;
}

/* Focus indicators */
.m3-btn-upload:focus-visible,
.m3-btn-primary:focus-visible,
.m3-btn-download:focus-visible,
.m3-btn-action:focus-visible {
    outline: 3px solid var(--m3-primary);
    outline-offset: 2px;
}

/* ========================================
   MOBILE RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
    .m3-tool-container {
        padding: 1rem;
    }

    .m3-upload-area {
        padding: 2rem 1.5rem;
    }

    .m3-file-grid {
        grid-template-columns: 1fr;
    }

    .m3-processing-animation {
        flex-direction: column;
        height: auto;
        gap: 1rem;
    }

    .m3-processing-arrow {
        transform: rotate(90deg);
    }

    .m3-stats-grid {
        flex-direction: column;
        gap: 1rem;
    }

    .m3-stat {
        padding: 1rem;
    }

    .m3-btn-download {
        width: 100%;
        justify-content: center;
    }
}

/* ========================================
   REDUCED MOTION
   ======================================== */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
   M3 DOCUMENTATION SECTIONS
   ======================================== */

/* Breadcrumb */
.m3-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0;
    margin: 1.5rem 0;
    font-size: 0.875rem;
    list-style: none;
}

.m3-breadcrumb-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.m3-breadcrumb-link {
    color: var(--m3-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.m3-breadcrumb-link:hover {
    color: var(--m3-tertiary);
}

.m3-breadcrumb-separator {
    color: var(--m3-on-surface-variant);
}

.m3-breadcrumb-current {
    color: var(--m3-on-surface);
    font-weight: 600;
}

/* Documentation Article */
.m3-doc-article {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.m3-doc-section {
    margin-bottom: 3rem;
}

.m3-doc-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--m3-on-surface);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--m3-primary);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.m3-doc-subtitle {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--m3-on-surface);
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.m3-doc-text {
    color: var(--m3-on-surface-variant);
    line-height: 1.8;
    font-size: 1rem;
    margin-bottom: 1rem;
}

/* Feature List */
.m3-feature-list {
    background: var(--m3-surface);
    border: 1px solid var(--m3-outline-variant);
    border-radius: var(--m3-radius-lg);
    padding: 1.5rem;
    list-style: none;
    margin: 0;
    display: grid;
    gap: 1rem;
}

.m3-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: var(--m3-on-surface);
    line-height: 1.7;
}

.m3-feature-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background: var(--m3-primary-container);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--m3-primary);
}

/* How-To Steps */
.m3-steps-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.m3-step {
    position: relative;
}

.m3-step-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.m3-step-number {
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(135deg, var(--m3-primary), #6366f1);
    color: white;
    border-radius: var(--m3-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.m3-step-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--m3-on-surface);
    margin: 0;
}

.m3-step-content {
    background: white;
    border: 1px solid var(--m3-outline-variant);
    border-radius: var(--m3-radius-lg);
    padding: 1.5rem;
    box-shadow: var(--m3-shadow-sm);
}

.m3-step-note {
    background: var(--m3-surface-variant);
    border-left: 3px solid var(--m3-primary);
    padding: 1rem;
    margin-top: 1rem;
    border-radius: 0 var(--m3-radius-sm) var(--m3-radius-sm) 0;
}

.m3-step-note-success {
    background: var(--m3-success-container);
    border-left-color: var(--m3-success);
}

/* Use Cases */
.m3-use-cases {
    display: grid;
    gap: 1rem;
}

.m3-use-case {
    background: white;
    border: 1px solid var(--m3-outline-variant);
    border-left: 4px solid var(--m3-primary);
    border-radius: var(--m3-radius-md);
    padding: 1.25rem;
    transition: all 0.2s var(--m3-ease-standard);
}

.m3-use-case:hover {
    box-shadow: var(--m3-shadow-md);
    border-left-color: var(--m3-tertiary);
}

.m3-use-case-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--m3-on-surface);
    margin: 0 0 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.m3-use-case-desc {
    color: var(--m3-on-surface-variant);
    line-height: 1.7;
    margin: 0;
    font-size: 0.9375rem;
}

/* FAQ Section */
.m3-faq-section {
    margin-top: 2rem;
    padding: 2rem;
    background: var(--m3-surface);
    border-radius: var(--m3-radius-xl);
}

.m3-faq-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--m3-on-surface);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.m3-faq-list {
    max-width: 700px;
    margin: 0 auto;
}

.m3-faq-item {
    margin-bottom: 1rem;
    background: white;
    border: 1px solid var(--m3-outline-variant);
    border-radius: var(--m3-radius-lg);
    overflow: hidden;
    transition: all 0.2s;
}

.m3-faq-item:hover {
    border-color: var(--m3-primary);
}

.m3-faq-item[open] {
    box-shadow: var(--m3-shadow-md);
}

.m3-faq-question {
    padding: 1rem 1.25rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--m3-on-surface);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    list-style: none;
}

.m3-faq-question::-webkit-details-marker {
    display: none;
}

.m3-faq-question svg {
    flex-shrink: 0;
    transition: transform 0.2s;
    color: var(--m3-primary);
}

.m3-faq-item[open] .m3-faq-question svg {
    transform: rotate(180deg);
}

.m3-faq-answer {
    padding: 0 1.25rem 1rem 3rem;
    color: var(--m3-on-surface-variant);
    line-height: 1.7;
}

/* Related Tools */
.m3-related-tools {
    margin-top: 2.5rem;
    padding: 2rem;
    background: var(--m3-surface);
    border-radius: var(--m3-radius-xl);
}

.m3-related-title {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--m3-on-surface);
    margin-bottom: 1.5rem;
    text-align: center;
}

.m3-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}

.m3-related-card {
    background: white;
    border: 1px solid var(--m3-outline-variant);
    border-radius: var(--m3-radius-lg);
    padding: 1.25rem;
    text-align: center;
    text-decoration: none;
    transition: all 0.2s var(--m3-ease-spring);
}

.m3-related-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--m3-shadow-md);
    border-color: var(--m3-primary);
}

.m3-related-icon {
    width: 48px;
    height: 48px;
    background: var(--m3-primary-container);
    border-radius: var(--m3-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.75rem;
    color: var(--m3-primary);
}

.m3-related-name {
    font-weight: 600;
    color: var(--m3-on-surface);
    font-size: 0.9375rem;
}

/* Mobile 2x2 grid for Related Tools - OVERRIDE */
@media (max-width: 768px) {
    .m3-related-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }
}

/* Fix FAQ chevron icon alignment */
.m3-faq-question {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
}

.m3-faq-question svg {
    flex-shrink: 0 !important;
    width: 16px !important;
    height: 16px !important;
    color: var(--m3-primary, #4f46e5) !important;
    transition: transform 0.2s ease !important;
}

.m3-faq-item[open] .m3-faq-question svg {
    transform: rotate(180deg) !important;
}

/* ========================================
   PROFESSIONAL SVG ICON SYSTEM FOR TOOL PAGES
   Replace emoji with clean vector icons
   ======================================== */

/* Style the upload icon container with gradient background */
.upload-icon-circle {
    position: relative !important;
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    min-height: 80px !important;
    border-radius: var(--m3-radius-lg, 16px) !important;
    background: linear-gradient(135deg, var(--m3-primary, #4f46e5), var(--m3-tertiary, #6366f1)) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3) !important;
    overflow: hidden !important;
}

/* Hide emoji text content */
.upload-icon-circle span {
    font-size: 0 !important;
    visibility: hidden !important;
    display: none !important;
}

/* Show SVG icon instead - default document icon */
.upload-icon-circle::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 40px !important;
    height: 40px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E");
}

/* ========================================
   TOOL-SPECIFIC ICONS
   Override default icon based on data-tool attribute
   ======================================== */

/* Split PDF - Scissors */
body[data-tool="split-pdf"] .upload-icon-circle::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Cline x1='20' y1='4' x2='8.12' y2='15.88'/%3E%3Cline x1='14.47' y1='14.48' x2='20' y2='20'/%3E%3Cline x1='8.12' y1='8.12' x2='12' y2='12'/%3E%3C/svg%3E") !important;
}

/* Merge PDF - Combine files */
body[data-tool="merge-pdf"] .upload-icon-circle::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='2' width='8' height='4' rx='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cline x1='12' y1='11' x2='12' y2='17'/%3E%3Cline x1='9' y1='14' x2='15' y2='14'/%3E%3C/svg%3E") !important;
}

/* Compress PDF - Minimize arrows */
body[data-tool="compress-pdf"] .upload-icon-circle::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 14 10 14 10 20'/%3E%3Cpolyline points='20 10 14 10 14 4'/%3E%3Cline x1='14' y1='10' x2='21' y2='3'/%3E%3Cline x1='3' y1='21' x2='10' y2='14'/%3E%3C/svg%3E") !important;
}

/* PDF to Word - File text */
body[data-tool="pdf-to-word"] .upload-icon-circle::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3C/svg%3E") !important;
}

/* Rotate PDF - Rotate icon */
body[data-tool="rotate-pdf"] .upload-icon-circle::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 4 23 10 17 10'/%3E%3Cpath d='M20.49 15a9 9 0 1 1-2.12-9.36L23 10'/%3E%3C/svg%3E") !important;
}

/* Edit PDF - Edit pen */
body[data-tool="edit-pdf"] .upload-icon-circle::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z'/%3E%3C/svg%3E") !important;
}

/* Protect PDF - Shield */
body[data-tool="protect-pdf"] .upload-icon-circle::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E") !important;
}

/* Unlock PDF - Unlock */
body[data-tool="unlock-pdf"] .upload-icon-circle::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 9.9-1'/%3E%3C/svg%3E") !important;
}

/* Watermark PDF - Droplet */
body[data-tool="watermark-pdf"] .upload-icon-circle::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z'/%3E%3C/svg%3E") !important;
}

/* Sign PDF - Pen */
body[data-tool="sign-pdf"] .upload-icon-circle::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19l7-7 3 3-7 7-3-3z'/%3E%3Cpath d='M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z'/%3E%3Ccircle cx='11' cy='11' r='2'/%3E%3C/svg%3E") !important;
}

/* Image tools */
body[data-tool="pdf-to-image"] .upload-icon-circle::before,
body[data-tool="file-converter"] .upload-icon-circle::before,
body[data-tool="crop-image"] .upload-icon-circle::before,
body[data-tool="compress-image"] .upload-icon-circle::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpolyline points='21 15 16 10 5 21'/%3E%3C/svg%3E") !important;
}

/* Excel tools */
body[data-tool="excel-to-pdf"] .upload-icon-circle::before,
body[data-tool="pdf-to-excel"] .upload-icon-circle::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 1-2-2V9m0 0h18'/%3E%3C/svg%3E") !important;
}

/* PPT tools */
body[data-tool="ppt-to-pdf"] .upload-icon-circle::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E") !important;
}

/* Page operations */
body[data-tool="add-page-numbers"] .upload-icon-circle::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='9' x2='20' y2='9'/%3E%3Cline x1='4' y1='15' x2='20' y2='15'/%3E%3Cline x1='10' y1='3' x2='8' y2='21'/%3E%3Cline x1='16' y1='3' x2='14' y2='21'/%3E%3C/svg%3E") !important;
}

body[data-tool="remove-pages"] .upload-icon-circle::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E") !important;
}

body[data-tool="extract-pages"] .upload-icon-circle::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E") !important;
}

body[data-tool="organize-pdf"] .upload-icon-circle::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 9 2 12 5 15'/%3E%3Cpolyline points='9 5 12 2 15 5'/%3E%3Cpolyline points='15 19 12 22 9 19'/%3E%3Cpolyline points='19 9 22 12 19 15'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cline x1='12' y1='2' x2='12' y2='22'/%3E%3C/svg%3E") !important;
}

/* Repair PDF - Wrench */
body[data-tool="repair-pdf"] .upload-icon-circle::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E") !important;
}

/* Other tools */
body[data-tool="fill-pdf-form"] .upload-icon-circle::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z'/%3E%3C/svg%3E") !important;
}

body[data-tool="pdf-translator"] .upload-icon-circle::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E") !important;
}

body[data-tool="batch-rename"] .upload-icon-circle::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E") !important;
}

body[data-tool="metadata-editor"] .upload-icon-circle::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='12' y1='18' x2='12' y2='12'/%3E%3Cline x1='9' y1='15' x2='15' y2='15'/%3E%3C/svg%3E") !important;
}

body[data-tool="file-to-text"] .upload-icon-circle::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7V5a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M17 3h2a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M21 17v2a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M7 21H5a2 2 0 0 1-2-2v-2'/%3E%3Cline x1='7' y1='12' x2='17' y2='12'/%3E%3C/svg%3E") !important;
}

body[data-tool="smart-processor"] .upload-icon-circle::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E") !important;
}