:root {
            --brand-red: #b30000;
            --brand-dark: #0b1c2d;
            --bg-light: #f8fafc;
            --card-bg: #ffffff;
            --text-primary: #0f172a;
            --text-secondary: #475569;
            --border-color: #e2e8f0;
            --accent-green: #16a34a;
            --radius-lg: 16px;
            --radius-md: 10px;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
        body { background-color: var(--bg-light); color: var(--text-primary); padding: 24px 12px; display: flex; flex-direction: column; align-items: center; min-height: 100vh; }

        .app-container { width: 100%; max-width: 760px; margin: 0 auto; }
        
        /* Breadcrumb Navigation */
        .breadcrumb-nav { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 20px; }
        .breadcrumb-nav a { color: var(--brand-red); text-decoration: none; font-weight: 600; }
        .breadcrumb-nav a:hover { text-decoration: underline; }
        .breadcrumb-nav span { margin: 0 6px; color: #94a3b8; }

        /* Main App Card */
        .converter-card { background: var(--card-bg); border-radius: var(--radius-lg); border: 1px solid var(--border-color); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05); padding: 28px 24px; text-align: center; }
        .converter-header { margin-bottom: 24px; }
        .converter-header h1 { font-size: 1.6rem; color: var(--brand-dark); font-weight: 800; margin-bottom: 6px; }
        .converter-header p { font-size: 0.95rem; color: var(--text-secondary); }

        /* Drag and Drop Zone */
        .drop-zone { border: 2px dashed #cbd5e1; border-radius: var(--radius-md); padding: 36px 16px; background: #f1f5f9; cursor: pointer; transition: all 0.2s ease; position: relative; }
        .drop-zone:hover, .drop-zone.dragover { border-color: var(--brand-red); background: #fef2f2; }
        .drop-zone input[type="file"] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
        .drop-zone-icon { width: 48px; height: 48px; fill: var(--brand-red); margin-bottom: 12px; }
        .drop-zone-text { font-size: 1rem; font-weight: 600; color: var(--text-primary); }
        .drop-zone-subtext { font-size: 0.8rem; color: var(--text-secondary); margin-top: 4px; }

        /* Preview Image Box */
        .preview-box { display: none; margin-top: 16px; max-height: 180px; overflow: hidden; border-radius: var(--radius-md); border: 1px solid var(--border-color); background: #f8fafc; }
        .preview-box img { width: 100%; height: 180px; object-fit: contain; }

        /* Control Panel */
        .controls-panel { display: none; margin-top: 24px; text-align: left; }
        .file-info-badge { background: #e2e8f0; padding: 10px 14px; border-radius: 8px; font-size: 0.88rem; font-weight: 600; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; word-break: break-all; }
        
        .format-select-group { margin-bottom: 20px; }
        .format-select-group label { display: block; font-size: 0.85rem; font-weight: 700; color: var(--brand-dark); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
        .format-select-group select { width: 100%; padding: 12px; border-radius: var(--radius-md); border: 1px solid var(--border-color); font-size: 1rem; font-weight: 600; background: #fff; color: var(--text-primary); outline: none; }

        /* Convert Button */
        .btn-convert { width: 100%; background: var(--brand-red); color: #ffffff; border: none; padding: 14px; font-size: 1rem; font-weight: 800; border-radius: var(--radius-md); cursor: pointer; transition: background 0.2s ease, transform 0.1s ease; box-shadow: 0 4px 12px rgba(179, 0, 0, 0.2); }
        .btn-convert:hover { background: #900000; }
        .btn-convert:active { transform: scale(0.99); }
        
        /* Status & Download */
        .status-box { margin-top: 16px; display: none; font-weight: 600; font-size: 0.9rem; text-align: center; color: var(--accent-green); }
        .download-link { display: inline-block; width: 100%; text-align: center; background: var(--accent-green); color: #fff; text-decoration: none; padding: 14px; border-radius: var(--radius-md); font-weight: 800; margin-top: 16px; box-shadow: 0 4px 12px rgba(22, 163, 74, 0.2); }

        /* SEO Content Area */
        .seo-content { margin-top: 40px; background: var(--card-bg); border-radius: var(--radius-lg); border: 1px solid var(--border-color); padding: 32px 28px; line-height: 1.7; color: var(--text-secondary); text-align: left; }
        .seo-content h2 { color: var(--brand-dark); font-size: 1.35rem; font-weight: 800; margin-top: 28px; margin-bottom: 12px; border-bottom: 2px solid var(--bg-light); padding-bottom: 6px; }
        .seo-content h2:first-of-type { margin-top: 0; }
        .seo-content h3 { color: var(--brand-dark); font-size: 1.05rem; font-weight: 700; margin-top: 18px; margin-bottom: 6px; }
        .seo-content p { font-size: 0.92rem; margin-bottom: 14px; }
        .seo-content ol, .seo-content ul { margin-left: 20px; margin-bottom: 16px; font-size: 0.92rem; }
        .seo-content li { margin-bottom: 8px; }
        .format-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 16px; }
        .format-card { background: #f8fafc; border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 16px; }
        .format-card h4 { color: var(--brand-red); font-weight: 800; font-size: 1rem; margin-bottom: 6px; }
        .format-card p { font-size: 0.85rem; margin-bottom: 0; }
    .editor{text-align:left}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.field{margin-bottom:16px}.field>label{display:block;font-weight:650;font-size:.9rem;margin-bottom:8px}.field input:not([type=checkbox]):not([type=range]):not([type=color]),.field select{width:100%;padding:11px;border:1px solid #cbd5e1;border-radius:8px;font-size:1rem;background:white;color:#0f172a}.field input[type=range]{width:100%;accent-color:#b30000}.field input[type=color]{width:70px;height:40px}.hint{font-size:.8rem;color:#475569;line-height:1.6;margin:8px 0 16px}.check{display:flex!important;gap:8px;align-items:center;font-size:.85rem;font-weight:400!important;margin:10px 0}.check input{width:18px;height:18px;flex-shrink:0}.inline-options,.actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.secondary{padding:10px 14px;border:1px solid #cbd5e1;background:#fff;border-radius:8px;font-weight:600;cursor:pointer}.actions .btn-convert{flex:1;width:auto}.actions{margin-top:20px}fieldset{border:0;min-width:0}fieldset:disabled{opacity:.5}button:disabled{opacity:.55;cursor:wait}:focus-visible{outline:3px solid #2563eb;outline-offset:3px}.comparison{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}.comparison figure{overflow:auto;max-height:440px;border:1px solid #cbd5e1;border-radius:8px;background:repeating-conic-gradient(#e2e8f0 0% 25%,white 0% 50%) 0/20px 20px}.comparison figcaption{background:#f1f5f9;padding:8px;font-weight:700}.comparison img{display:block;width:100%;height:280px;object-fit:contain}.comparison.actual img{width:auto;height:auto;max-width:none}.result-stats{line-height:1.7;margin-top:16px;font-size:.9rem}.status-box{padding:12px;background:#f1f5f9;border-radius:8px;line-height:1.6}.file-info-badge{gap:12px;flex-wrap:wrap}.app-container{max-width:920px}[hidden]{display:none!important}@media(max-width:600px){.settings-grid,.comparison{grid-template-columns:1fr}.converter-card{padding:20px 14px}.actions{align-items:stretch}.actions .btn-convert{flex-basis:100%}.format-grid{grid-template-columns:1fr}.seo-content{padding:22px 16px}}