:root{--color-primary:#F56D4E;--color-primary-hover:#E45A3F;--color-primary-light:#F89A85;--color-primary-lighter:#FBB5A6;--color-primary-dark:#C94E3C;--gradient-primary:linear-gradient(135deg,#F56D4E,#F89A85 50%,#E45A3F);--gradient-primary-hover:linear-gradient(135deg,#E45A3F,#F56D4E 50%,#F89A85);--color-primary-10:rgba(245,109,78,0.1);--color-primary-20:rgba(245,109,78,0.2);--color-primary-30:rgba(245,109,78,0.3);--color-primary-50:rgba(245,109,78,0.5);--color-success:#10b981;--color-warning:#f59e0b;--color-error:#ef4444;--color-info:var(--color-primary)}#converter .scroll-decoration{display:none!important}.svg-converter-layout{display:grid;grid-template-columns:minmax(280px,1fr) minmax(320px,400px) minmax(300px,500px);gap:clamp(12px,2vw,24px);height:auto;max-height:none;padding:20px;box-sizing:border-box;overflow:hidden}.svg-converter-column{min-width:0;overflow:hidden;display:flex;flex-direction:column;height:auto;max-height:none}.svg-converter-layout .file-list-column .file-upload-area-container,.svg-converter-layout .preview-column>.bg-white.rounded-lg,.svg-converter-layout .settings-column>.bg-card.rounded-xl{height:100%}.file-list-column{min-width:280px;max-width:400px}.settings-column{min-width:320px;max-width:450px}.svg-converter-layout .settings-column .settings-content{padding-top:1.5rem}.svg-converter-layout .preview-file-title,.svg-converter-layout .settings-column .settings-summary{display:none}.preview-column{min-width:300px;max-width:600px;height:100%;max-height:100%;overflow:hidden}.scrollable-content{flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(156,163,175,.5) transparent}.scrollable-content::-webkit-scrollbar{width:6px}.scrollable-content::-webkit-scrollbar-track{background:transparent}.scrollable-content::-webkit-scrollbar-thumb{background-color:rgba(156,163,175,.5);border-radius:3px}.scrollable-content::-webkit-scrollbar-thumb:hover{background-color:rgba(156,163,175,.7)}.svg-converter-layout ::-webkit-scrollbar{width:6px;height:6px}.svg-converter-layout ::-webkit-scrollbar-track{background:transparent}.svg-converter-layout ::-webkit-scrollbar-thumb{background-color:#E5E7EB;border-radius:8px}.svg-converter-layout ::-webkit-scrollbar-thumb:hover{background-color:#D1D5DB}.svg-preview-container{position:relative;overflow:hidden;background:var(--bg-secondary);border-radius:8px;display:flex;flex-direction:column}.svg-preview-scroll-area{position:relative;overflow:auto;flex:1;scrollbar-width:thin;scrollbar-color:rgba(230,148,51,.3) transparent}.svg-preview-scroll-area::-webkit-scrollbar{width:8px;height:8px}.svg-preview-scroll-area::-webkit-scrollbar-track{background:transparent}.svg-preview-scroll-area::-webkit-scrollbar-thumb{background:rgba(230,148,51,.3);border-radius:4px;transition:background-color .2s ease}.svg-preview-scroll-area::-webkit-scrollbar-thumb:hover{background:rgba(230,148,51,.5)}.svg-preview-content-wrapper{position:relative;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.svg-preview-content{display:block;position:relative;transform-origin:center center;will-change:transform}.svg-preview-image{display:block;object-fit:contain;object-position:center;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.1);transition:box-shadow .2s ease}.svg-preview-image:hover{box-shadow:0 4px 12px rgba(0,0,0,.15)}.file-list-container{height:100%;max-height:100%;display:flex;flex-direction:column}.file-list{flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#d1d5db #f3f4f6}.clear-button-container{padding:16px;border-top:1px solid #e5e7eb;margin-top:auto}.file-upload-area-container{height:100%;max-height:100%;display:flex;flex-direction:column;overflow:hidden}.file-upload-area-container:not(.empty-state) .border-2.border-dashed{flex-shrink:0;min-height:120px;max-height:160px}.file-upload-area-container .border.rounded-lg.bg-card.m-4.mt-4{flex:1;min-height:0;max-height:100%;display:flex;flex-direction:column;overflow:hidden}.file-upload-area-container .divide-y.divide-border.flex-1.overflow-y-auto{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(156,163,175,.35) transparent}.svg-converter-layout .file-upload-area-container .divide-y.divide-border.flex-1.overflow-y-auto::-webkit-scrollbar{width:4px;height:4px}.svg-converter-layout .file-upload-area-container .divide-y.divide-border.flex-1.overflow-y-auto::-webkit-scrollbar-track{background:transparent}.svg-converter-layout .file-upload-area-container .divide-y.divide-border.flex-1.overflow-y-auto::-webkit-scrollbar-thumb{background:#E5E7EB;border-radius:10px}.svg-converter-layout .file-upload-area-container .divide-y.divide-border.flex-1.overflow-y-auto::-webkit-scrollbar-thumb:hover{background:#D1D5DB}.svg-converter-layout .add-more-btn:hover{background-color:var(--color-primary-10);color:var(--color-primary);border-color:rgba(245,109,78,.5)}.file-upload-area-container .px-4.py-3.border-t.bg-gray-50.rounded-b-lg{flex-shrink:0;margin-top:auto}.color-picker-container{position:relative;width:100%}.color-picker-dropdown{position:absolute;top:100%;left:0;z-index:10;width:100%;background:white;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1)}@media (min-width:1400px){.svg-converter-layout{grid-template-columns:1fr 1fr 1fr;gap:24px}}@media (min-width:1200px) and (max-width:1399px){.svg-converter-layout{grid-template-columns:30% 35% 35%;gap:20px}}@media (min-width:992px) and (max-width:1199px){.svg-converter-layout{grid-template-columns:25% 37.5% 37.5%;gap:16px}.settings-panel{padding:12px}.preview-column{max-height:calc(100vh - 320px)}.svg-preview-container{max-height:calc(100vh - 360px)}}@media (min-width:768px) and (max-width:991px){.svg-converter-layout{grid-template-columns:40% 60%;gap:16px}.preview-column{display:none}.settings-preview-tabs{display:block}.file-list-container{height:calc(100vh - 320px);max-height:calc(100vh - 320px)}}@media (max-width:767px){.svg-converter-layout{display:flex;flex-direction:column;gap:16px}.svg-converter-column{height:auto;max-height:none}.file-list-column,.settings-column{min-width:0;max-width:none}.preview-column{display:none}.simple-mode .file-upload-area-container{background:transparent;border:0;box-shadow:none;border-radius:12px}.simple-mode .file-upload-area-container:not(.empty-state) .relative.border-2.border-dashed{padding:16px;margin:8px 8px 0;border-radius:12px;min-height:180px}.simple-mode .file-upload-area-container.empty-state{display:flex;align-items:center;justify-content:center}.simple-mode .file-upload-area-container.empty-state .relative.border-2.border-dashed{width:82%;margin:0}@media (min-width:768px){.simple-mode .file-upload-area-container.empty-state .relative.border-2.border-dashed{width:75%}}@media (min-width:1024px){.simple-mode .file-upload-area-container.empty-state .relative.border-2.border-dashed{width:70%}}.file-upload-area-container .border.rounded-lg.bg-card.m-4.mt-4{height:auto;min-height:50vh;max-height:50vh}.file-upload-area-container .px-4.py-3.border-b.bg-muted.rounded-t-lg{padding:10px 12px}.file-upload-area-container .divide-y.divide-border.flex-1.overflow-y-auto{padding-bottom:8px;max-height:calc(50vh - 96px)}.file-upload-area-container h3.text-sm{font-size:12px}.file-upload-area-container .text-2xs{font-size:9px!important}.file-upload-area-container .p-1{padding:6px}.file-upload-area-container .w-4.h-4{width:14px;height:14px}.settings-column .bg-card.rounded-xl{min-height:45vh;max-height:50vh}.settings-column .p-4{padding:10px!important}.settings-column label.text-sm{font-size:12px}.settings-column .text-xs{font-size:11px}.settings-column .text-sm{font-size:12px}.settings-column .text-base{font-size:13px}.settings-column button,.settings-column input[type=number]{padding:6px 10px!important;font-size:12px!important}.mobile-step-indicator{display:flex;justify-content:center;margin-bottom:20px}}@media (pointer:coarse){.touch-target{min-height:44px;min-width:44px;padding:12px}.file-list-item{padding:16px 12px;margin-bottom:8px}}@media (hover:none){.interactive-element:active{transform:scale(.98);background-color:var(--active-bg)}}.primary-button{background:var(--gradient-primary);color:white;transition:all .2s ease}.primary-button:hover{background:var(--gradient-primary-hover);transform:translateY(-1px);box-shadow:0 4px 12px var(--color-primary-20)}.primary-button:active{transform:translateY(0);box-shadow:0 2px 6px var(--color-primary-30)}.primary-border{border-color:var(--color-primary)}.primary-text{color:var(--color-primary)}.primary-bg{background-color:var(--color-primary)}.primary-bg-light{background-color:var(--color-primary-10)}.selected-item{background:var(--color-primary-10);border-color:var(--color-primary-30);box-shadow:0 0 0 1px var(--color-primary-20)}.loading-spinner{border-color:transparent transparent var(--color-primary) transparent}.svg-converter-layout{will-change:transform;transition:transform .3s ease}@container (max-width: 800px){.settings-column .advanced-settings{display:none}.settings-column .settings-toggle{display:block}}.preview-area{touch-action:pan-x pan-y pinch-zoom}.file-list{touch-action:pan-y;overscroll-behavior:contain}@media (min-width:992px){.file-upload-area-container .border.rounded-lg.bg-card.m-4.mt-4{min-height:45vh;max-height:60vh}.file-upload-area-container .divide-y.divide-border.flex-1.overflow-y-auto{max-height:calc(60vh - 96px);overflow-y:auto}.settings-column .bg-card.rounded-xl{min-height:40vh;max-height:55vh}.settings-column .p-4{padding:12px}}.svg-converter-layout .file-upload-area-container .border.rounded-lg.bg-card.m-4.mt-4{height:auto;min-height:0;max-height:none;margin:0!important}.svg-converter-layout .file-upload-area-container.empty-state .relative.border-2.border-dashed{height:100%!important;min-height:100%!important;max-height:100%!important}.svg-converter-layout .file-upload-area-container.empty-state #upload-area{height:100%!important;min-height:100%!important;max-height:100%!important;flex:1 1 auto!important}.svg-converter-layout .preview-column>.bg-white.rounded-lg{height:auto;min-height:0!important}.svg-converter-layout .settings-column>.bg-card.rounded-xl{height:auto}.svg-converter-layout .preview-column>.bg-white.rounded-lg{height:390px}@media (min-width:768px){.svg-converter-layout .preview-column>.bg-white.rounded-lg{height:468px}}@media (min-width:1024px){.svg-converter-layout .preview-column>.bg-white.rounded-lg{height:546px}}.svg-converter-layout .file-upload-area-container.empty-state{height:390px}@media (min-width:768px){.svg-converter-layout .file-upload-area-container.empty-state{height:468px}}@media (min-width:1024px){.svg-converter-layout .file-upload-area-container.empty-state{height:546px}}.svg-converter-layout .file-upload-area-container:not(.empty-state) #upload-area{display:none}.svg-converter-layout .settings-column>.bg-card.rounded-xl{height:390px}@media (min-width:768px){.svg-converter-layout .settings-column>.bg-card.rounded-xl{height:468px}}@media (min-width:1024px){.svg-converter-layout .settings-column>.bg-card.rounded-xl{height:546px}}.svg-converter-layout .settings-column>.bg-card.rounded-xl{background-color:#ffffff}.svg-converter-layout .settings-header{display:none}#conversion-results .custom-scroll{-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(243,244,246,.5) transparent}#conversion-results .custom-scroll::-webkit-scrollbar{width:4px;height:4px}#conversion-results .custom-scroll::-webkit-scrollbar-track{background:transparent}#conversion-results .custom-scroll::-webkit-scrollbar-thumb{background-color:rgba(243,244,246,.5);border-radius:9999px;transition:background-color .5s ease-in-out}#conversion-results .custom-scroll:hover::-webkit-scrollbar-thumb{background-color:rgba(229,231,235,.7)}#conversion-results .custom-scroll.scrolling{scrollbar-color:rgba(209,213,219,.85) transparent}#conversion-results .custom-scroll.scrolling::-webkit-scrollbar-thumb{background-color:rgba(209,213,219,.85);transition:background-color .5s ease-in-out}#conversion-results{--results-max-vh:78vh;--results-header:48px;--results-footer:64px}#conversion-results .results-left-column{height:calc(var(--results-max-vh) - var(--results-header) - var(--results-footer));-webkit-overflow-scrolling:touch}@supports (-webkit-overflow-scrolling:touch){#conversion-results .results-left-column{height:calc(78vh - 112px)}}