:root{--surface: #ffffff;--surface-muted: #f4f6fb;--border: #e3e8f2;--text-main: #1c2333;--text-muted: #5f6b85;--primary: #4f46ef;--primary-dark: #312e81;--accent: #36cfc9;--shadow-soft: 0 20px 45px rgba(15, 23, 42, 0.08);--gradient: linear-gradient(135deg, #4f46ef 0%, #7c3aed 100%);}
#media-inspector-page{padding-bottom: 3rem;color: var(--text-main);}
#media-inspector-page .panel{background: var(--surface);border: 1px solid var(--border);border-radius: 20px;box-shadow: var(--shadow-soft);padding: 32px;height: 100%;transition: background 0.3s ease,border 0.3s ease;}
.breadcrumbs{margin-bottom: 20px;padding: 0;}
.breadcrumbs-list{list-style: none;padding: 0;margin: 0;display: flex;flex-wrap: wrap;align-items: center;gap: 8px;color: var(--text-muted);font-size: 14px;}
.breadcrumbs-item a{color: var(--text-muted);text-decoration: none;font-weight: 600;}
.breadcrumbs-item a:hover{color: var(--primary);}
.breadcrumbs-separator{opacity: 0.5;margin: 0 0.5rem;}
.tool-hero{display: flex;flex-wrap: wrap;gap: 32px;align-items: flex-start;margin-bottom: 40px;}
.hero-text{flex: 1;min-width: 260px;}
.hero-text h1{font-size: 40px;font-weight: 700;line-height: 1.2;margin-bottom: 16px;}
.hero-subtitle{font-size: 18px;color: var(--text-muted);max-width: 740px;margin-bottom: 24px;}
.hero-pill-row{display: flex;flex-wrap: wrap;gap: 12px;}
.hero-pill{padding: 8px 16px;border: 1px solid var(--primary);border-radius: 99px;color: var(--primary);font-weight: 600;font-size: 13px;}
.share-buttons{display: grid;grid-template-columns: repeat(auto-fit,minmax(140px,1fr));gap: 10px;}
.share-btn{border: none;border-radius: 14px;padding: 12px 16px;font-weight: 600;display: inline-flex;align-items: center;justify-content: center;gap: 8px;color: #fff;cursor: pointer;transition: transform 0.2s ease,box-shadow 0.2s ease;box-shadow: 0 10px 20px rgba(15, 23, 42, 0.15);font-size: 14px;}
.share-btn:hover{transform: translateY(-2px);box-shadow: 0 14px 24px rgba(15, 23, 42, 0.18);}
.share-x{background: #111827;}
.share-facebook{background: #1877f2;}
.share-linkedin{background: #0a66c2;}
.share-reddit{background: #ff4500;}
.share-telegram{background: #229ed9;}
.share-whatsapp{background: #25d366;color: #0f172a;}
.copy-btn{display: inline-flex;align-items: center;justify-content: center;gap: 0.5rem;padding: 0.85rem 1.25rem;border-radius: 14px;border: 1px solid var(--border);background: var(--surface-muted);color: var(--text-main);font-weight: 600;cursor: pointer;transition: background 0.2s ease,transform 0.2s ease,border-color 0.2s ease;font-size: 0.95rem;width: calc(50% - 0.5rem);}
.copy-btn:hover{background: rgba(79, 70, 239, 0.08);border-color: var(--primary);transform: translateY(-1px);}
.copy-btn[data-state="copied"]{background: rgba(34, 197, 94, 0.12);border-color: rgba(34, 197, 94, 0.4);color: #059669;}
.tool-wrapper{display: grid;grid-template-columns: repeat(auto-fit,minmax(320px,1fr));gap: 24px;margin-bottom: 40px;}
.stats-panel{display: flex;flex-direction: column;gap: 24px;}
.stats-grid{display: grid;grid-template-columns: repeat(auto-fit,minmax(180px,1fr));gap: 16px;grid-auto-rows: 1fr;}
.stat-card{padding: 18px;border: 1px solid var(--border);border-radius: 16px;background: var(--surface-muted);display: flex;flex-direction: column;gap: 6px;position: relative;}
.stat-label{font-size: 13px;font-weight: 600;color: var(--text-muted);text-transform: uppercase;letter-spacing: 0.08em;}
.stat-value{font-size: 14px;font-weight: 700;color: var(--text-main);word-break: break-word;line-height: 1.4;}
.stat-value.large{font-size: 20px;}
.sticky-panel{position: sticky;top: 90px;}
.upload-area{border: 2px dashed var(--border);border-radius: 18px;padding: 48px 24px;text-align: center;transition: all 0.3s ease;background: var(--surface-muted);cursor: pointer;position: relative;min-height: 280px;display: flex;flex-direction: column;align-items: center;justify-content: center;}
.upload-area:hover{border-color: var(--primary);background: rgba(79, 70, 239, 0.05);}
.upload-area.dragover{border-color: var(--primary);background: rgba(79, 70, 239, 0.1);transform: scale(1.02);}
.upload-icon{font-size: 48px;color: var(--primary);margin-bottom: 16px;}
.upload-text{font-size: 18px;font-weight: 600;color: var(--text-main);margin-bottom: 8px;}
.upload-subtext{font-size: 14px;color: var(--text-muted);margin-bottom: 20px;}
.file-input{position: absolute;opacity: 0;width: 100%;height: 100%;cursor: pointer;top: 0;left: 0;display: none;}
.upload-button{background: var(--gradient);color: white;border: none;padding: 12px 24px;border-radius: 12px;font-size: 15px;font-weight: 600;cursor: pointer;transition: transform 0.2s ease,box-shadow 0.2s ease;box-shadow: var(--shadow-soft);}
.upload-button:hover{transform: translateY(-2px);box-shadow: 0 14px 24px rgba(79, 70, 239, 0.25);}
.inspection-results{display: none;animation: slideInUp 0.5s ease;margin-top: 24px;}
.result-header{display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;flex-wrap: wrap;gap: 12px;}
.result-title{font-size: 20px;font-weight: 700;color: var(--text-main);margin: 0;}
.properties-table{width: 100%;border-collapse: collapse;margin-top: 16px;}
.properties-table tr{border-bottom: 1px solid var(--border);}
.properties-table tr:last-child{border-bottom: none;}
.properties-table td{padding: 16px 12px;vertical-align: top;}
.properties-table td:first-child{font-weight: 600;color: var(--text-main);width: 40%;min-width: 140px;}
.properties-table td:last-child{color: var(--text-muted);word-break: break-word;}
.properties-grid{display: grid;grid-template-columns: repeat(auto-fit,minmax(250px,1fr));gap: 16px;margin-top: 20px;}
.property-card{border: 1px solid var(--border);border-radius: 12px;padding: 16px;background: var(--surface-muted);}
.property-label{font-size: 12px;font-weight: 600;color: var(--text-muted);text-transform: uppercase;letter-spacing: 0.05em;margin-bottom: 8px;}
.property-value{font-size: 15px;color: var(--text-main);font-weight: 500;word-break: break-word;}
.error-message,.success-message{padding: 16px 20px;border-radius: 12px;margin: 16px 0;display: none;text-align: center;font-weight: 600;font-size: 14px;}
.error-message{background: linear-gradient(135deg,#ff6b6b 0%,#ee5a52 100%);color: white;}
.success-message{background: linear-gradient(135deg,#56ab2f 0%,#a8e6cf 100%);color: white;}
.tooltip{position: relative;cursor: help;display: inline-block;}
.tooltip .tooltip-content{opacity: 0;visibility: hidden;position: absolute;bottom: calc(100% + 10px);left: 50%;transform: translateX(-50%);background: var(--text-main);color: white;padding: 8px 12px;border-radius: 8px;font-size: 12px;transition: opacity 0.2s ease;box-shadow: var(--shadow-soft);z-index: 10;pointer-events: none;max-width: 250px;white-space: normal;}
.tooltip:hover .tooltip-content,.tooltip:focus .tooltip-content{opacity: 1;visibility: visible;}
.tooltip-icon{display: inline-flex;align-items: center;justify-content: center;width: 18px;height: 18px;border-radius: 50%;background: var(--text-muted);color: white;font-size: 11px;font-weight: 700;margin-left: 6px;vertical-align: middle;}
.education-block{margin-top: 50px;}
.education-block h2{font-size: 30px;font-weight: 700;margin-bottom: 16px;color: var(--text-main);}
.education-block h3{font-size: 24px;font-weight: 700;margin-top: 2rem;margin-bottom: 1rem;color: var(--text-main);}
.education-block p{font-size: 16px;color: var(--text-muted);line-height: 1.7;margin-bottom: 16px;}
.infographic-row{display: grid;grid-template-columns: repeat(auto-fit,minmax(200px,1fr));gap: 16px;margin-top: 24px;}
.infographic-card{border: 1px solid var(--border);border-radius: 16px;padding: 20px;background: var(--surface-muted);}
.infographic-icon{width: 48px;height: 48px;border-radius: 12px;background: var(--gradient);color: #fff;display: inline-flex;align-items: center;justify-content: center;font-weight: 700;font-size: 20px;margin-bottom: 12px;}
.infographic-card h5{margin-bottom: 8px;font-size: 16px;font-weight: 700;color: var(--text-main);}
.infographic-card p{font-size: 14px;color: var(--text-muted);line-height: 1.6;margin: 0;}
.infographic-flow{margin-top: 30px;padding: 24px;border-radius: 18px;border: 1px dashed var(--border);background: var(--surface);display: grid;grid-template-columns: repeat(auto-fit,minmax(220px,1fr));gap: 18px;}
.flow-step{display: flex;flex-direction: column;gap: 8px;}
.flow-step strong{font-size: 15px;color: var(--text-main);font-weight: 700;}
.flow-step p{font-size: 14px;color: var(--text-muted);line-height: 1.6;margin: 0;}
.action-buttons{display: grid;grid-template-columns: repeat(auto-fit,minmax(160px,1fr));gap: 12px;margin-top: 20px;}
.action-btn{padding: 14px 20px;border: none;border-radius: 14px;font-size: 15px;font-weight: 600;cursor: pointer;transition: transform 0.2s ease,box-shadow 0.2s ease;display: flex;align-items: center;justify-content: center;gap: 8px;}
.btn-primary{background: var(--gradient);color: white;box-shadow: var(--shadow-soft);}
.btn-secondary{background: var(--surface-muted);color: var(--text-main);border: 1px solid var(--border);}
.action-btn:hover{transform: translateY(-2px);}
@keyframes slideInUp{from{opacity: 0;transform: translateY(30px);}to{opacity: 1;transform: translateY(0);}}
.media-preview{margin: 20px 0;text-align: center;}
.media-preview img,.media-preview video,.media-preview audio{max-width: 100%;border-radius: 12px;box-shadow: var(--shadow-soft);}
@media (max-width: 768px){.tool-hero{flex-direction: column;}.hero-text h1{font-size: 32px;}.panel{padding: 24px;}.upload-area{padding: 32px 16px;min-height: 220px;}.action-buttons{grid-template-columns: 1fr;}.share-buttons{grid-template-columns: repeat(2,1fr);}.infographic-row{grid-template-columns: 1fr;}.copy-btn{width: 100%;}.properties-grid{grid-template-columns: 1fr;}}