:root{--primary-color:#2563eb;--primary-dark:#1e40af;--secondary-color:#059669;--danger-color:#dc2626;--bg-primary:#ffffff;--bg-secondary:#f9fafb;--text-primary:#111827;--text-secondary:#6b7280;--border-color:#e5e7eb;--shadow-sm:0 1px 2px 0 rgba(0, 0, 0, 0.05);--shadow-md:0 4px 6px -1px rgba(0, 0, 0, 0.1);--radius-md:6px;--transition-base:150ms ease;--error-background:rgba(220, 38, 38, 0.1)}[data-theme=dark]{--bg-primary:#1f2937;--bg-secondary:#111827;--text-primary:#f9fafb;--text-secondary:#9ca3af;--border-color:#374151;--error-background:rgb(226 207 207)}*{box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;margin:0;padding:0;background:var(--bg-secondary);color:var(--text-primary);line-height:1.5}.footer,.header{background:var(--bg-primary);border-bottom:1px solid var(--border-color);padding:12px 20px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100}.header-title{font-size:18px;font-weight:600;margin:0;color:var(--text-primary)}.header-links{display:flex;gap:16px;align-items:center}.header-link{color:var(--text-secondary);text-decoration:none;font-size:14px;transition:color var(--transition-base)}.header-link:hover{color:var(--primary-color)}.footer-label,.package-label{font-size:13px;color:var(--text-secondary);font-weight:500;margin-right:4px}.package-link{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:var(--primary-color);color:#fff!important;border-radius:var(--radius-md);font-weight:500;transition:all var(--transition-base)}.package-link:hover{background:var(--primary-dark);transform:translateY(-1px);box-shadow:var(--shadow-md)}.package-link svg{flex-shrink:0}.footer{display:block;border-top:1px solid var(--border-color)}.footer-content p,.footer-label{justify-self:center}.footer-links{display:flex}.footer-links a{margin:auto;font-size:13px;color:var(--text-secondary)}.theme-toggle{background:0 0;border:1px solid var(--border-color);border-radius:var(--radius-md);width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-secondary);transition:all var(--transition-base);padding:0}.theme-toggle:hover{background:var(--bg-secondary);color:var(--text-primary)}.theme-toggle svg{width:16px;height:16px}.main-layout{display:flex;min-height:calc(100vh - 49px)}.sidebar-left,.sidebar-right{width:120px;flex-shrink:0}.main-content{flex:1;max-width:1400px;margin:0 auto;padding:20px;width:100%}.tabs{display:flex;gap:4px;padding:4px;background:var(--bg-primary);border-radius:var(--radius-md);margin-bottom:20px;border:1px solid var(--border-color)}.tabsOption{flex:1;padding:10px 16px;background:0 0;border:none;border-radius:4px;font-size:14px;font-weight:500;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-base);text-align:center;margin:0}.tabsOption:hover{background:var(--bg-secondary);color:var(--text-primary)}.tabsOption.active{background:var(--primary-color);color:#fff}select.tabsOption{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 1rem center;background-size:1em;padding-right:2.5rem;text-align:left;border:1px solid var(--border-color);background-color:var(--bg-primary)}select.tabsOption option{background-color:var(--bg-primary);color:var(--text-primary);padding:12px}select.tabsOption:hover{border-color:var(--primary-color);color:var(--text-primary)}select.tabsOption:focus{outline:0;border-color:var(--primary-color);box-shadow:0 0 0 2px rgba(37,99,235,.1)}.container{background:var(--bg-primary);border-radius:var(--radius-md);border:1px solid var(--border-color);padding:24px}.section-header{font-size:13px;font-weight:600;margin:0 0 8px;color:var(--text-primary);text-transform:uppercase;letter-spacing:.5px}.main-conversion-area{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px}.conversion-panel{display:flex;flex-direction:column}textarea{width:100%;min-height:350px;padding:12px;margin-bottom:12px;border:1px solid var(--border-color);border-radius:var(--radius-md);font-family:'SF Mono',Monaco,'Cascadia Code','Roboto Mono',Consolas,monospace;font-size:13px;background:var(--bg-primary);color:var(--text-primary);resize:vertical;transition:border-color var(--transition-base);line-height:1.5}textarea:focus{outline:0;border-color:var(--primary-color)}textarea::placeholder{color:var(--text-secondary)}button{padding:10px 16px;border:none;border-radius:var(--radius-md);font-size:14px;font-weight:500;cursor:pointer;transition:all var(--transition-base)}button:active{transform:scale(.98)}.convertionBtnsContainer{display:grid;grid-template-columns:1fr auto}#validateBtn,#visualiserBtn,.left-conversion-btn{background:var(--secondary-color);color:#fff;margin-right:5px}#validateBtn:hover,#visualiserBtn:hover,.left-conversion-btn:hover{background:#047857}.right-conversion-btn{background:var(--primary-color);color:#fff;margin-right:5px}.right-conversion-btn:hover{background:var(--primary-dark)}[id$=DownloadAllBtn]{background:#f59e0b;color:#fff;display:none}[id$=DownloadAllBtn]:hover{background:#d97706}input[type=file]{padding:10px;border:1px dashed var(--border-color);border-radius:var(--radius-md);background:var(--bg-secondary);cursor:pointer;transition:all var(--transition-base);width:100%;margin-bottom:12px;font-size:14px}input[type=file]:hover{border-color:var(--primary-color)}.file-status{margin-top:8px;padding:12px;background:var(--bg-secondary);border-left:3px solid var(--primary-color);border-radius:var(--radius-md);font-size:13px;color:var(--text-secondary)}.file-status strong{color:var(--text-primary);border:none;padding:0;margin:0}.error{color:var(--danger-color);font-weight:500;padding:10px 12px;background:var(--error-background);border-radius:var(--radius-md);margin:12px 0;display:block;font-size:14px}.error:empty{display:none}#csvSection,#jsonSection,#validatorSection,#visualiserSection,#xmlSection,#yamlSection{display:none}#jsonSection{display:block}hr{border:none;height:1px;background:var(--border-color);margin:24px 0}.ads{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);overflow:hidden}.horizontal-ads{width:100%;max-height:90px;display:flex;justify-content:center}.vertical-ads{position:sticky;top:60px;width:120px;height:600px;margin:20px 0}iframe{height:100%;width:100%;border:none}.info-section{margin-top:32px;padding-top:24px}.info-section h1{font-size:18px;font-weight:600;margin:0 0 12px;color:var(--text-primary)}.info-section p{color:var(--text-secondary);line-height:1.6;margin-bottom:12px;font-size:14px}.info-section ul{list-style:none;padding:0}.info-section li{padding:8px 0;padding-left:20px;position:relative;color:var(--text-secondary);font-size:14px}.info-section li::before{content:'•';position:absolute;left:0;color:var(--primary-color);font-weight:700}.info-section strong{color:var(--text-primary);border:none;padding:0;margin:0}@media screen and (max-width:1024px){.sidebar-left,.sidebar-right{display:none}}@media screen and (max-width:768px){.header{padding:10px 15px}.header-title{font-size:16px}.header-links{gap:12px}.header-link{font-size:13px}.package-label{display:none}.package-link{padding:5px 10px;font-size:12px;gap:4px}.package-link svg{width:12px;height:12px}.main-content{padding:15px}.tabs{flex-direction:column;gap:0;padding:0}.tabsOption{display:none;border-radius:0;border-bottom:1px solid var(--border-color);padding:14px}#selectConvertorDropdown.tabsOption{display:block!important;border-radius:var(--radius-md) var(--radius-md) 0 0;position:relative}.tabsOption.active{display:block!important;border-radius:var(--radius-md) var(--radius-md) 0 0;position:relative}.tabs.active .tabsOption{display:block!important}.tabs.active .tabsOption:last-child{border-radius:0 0 var(--radius-md) var(--radius-md)}.tabsOption.active::after{content:"▼";position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:10px}.tabs.active .tabsOption.active::after{transform:translateY(-50%) rotate(180deg)}.main-conversion-area{grid-template-columns:1fr;gap:16px}textarea{min-height:250px;font-size:12px}button{width:100%;margin-bottom:10px}.container{padding:16px}}@media screen and (max-width:480px){textarea{min-height:200px}.header-links{display:none}}.copy-btn{background:0 0;border:1px solid var(--border-color);color:var(--text-secondary);padding:8px;border-radius:var(--radius-md);cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;width:36px;height:36px}.copy-btn:hover{background:var(--bg-secondary);color:var(--primary-color);border-color:var(--primary-color);transform:translateY(-1px);box-shadow:0 2px 4px rgba(0,0,0,.05)}.copy-btn:active{transform:translateY(0)}.copy-btn svg{width:16px;height:16px}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(100px);background:#10b981;color:#fff;padding:10px 20px;border-radius:50px;font-size:14px;font-weight:500;box-shadow:0 4px 12px rgba(0,0,0,.15);z-index:1000;transition:transform .3s cubic-bezier(.175, .885, .32, 1.275),opacity .3s ease;opacity:0;display:flex;align-items:center;gap:8px;pointer-events:none}.toast.show{transform:translateX(-50%) translateY(0);opacity:1}.toast i{font-size:16px}@media print{.ads,.copy-btn,.header-links,.horizontal-ads,.theme-toggle,.vertical-ads,button,input[type=file]{display:none!important}body{background:#fff}}