:root{--bg-primary:#f1f5f9;--bg-secondary:#fff;--text-primary:#1e293b;--text-secondary:#64748b;--border-color:#e2e8f0;--hover-bg:#f1f5f9;--primary-color:#3b82f6;--primary-hover:#2563eb;transition:color .3s,background-color .3s,border-color .3s,box-shadow .3s}:root.dark{--bg-primary:#0f172a;--bg-secondary:#1e293b;--text-primary:#f1f5f9;--text-secondary:#94a3b8;--border-color:#334155;--hover-bg:#334155;--primary-color:#60a5fa;--primary-hover:#3b82f6}body{background-color:var(--bg-primary);color:var(--text-primary);transition:background-color .3s,color .3s}.app{max-width:100%;min-height:100vh;margin:0;padding:0}:root{--primary-50:#eff6ff;--primary-100:#dbeafe;--primary-200:#bfdbfe;--primary-300:#93c5fd;--primary-400:#60a5fa;--primary-500:#3b82f6;--primary-600:#2563eb;--primary-700:#1d4ed8;--primary-800:#1e40af;--primary-900:#1e3a8a;--success-50:#f0fdf4;--success-100:#dcfce7;--success-200:#bbf7d0;--success-300:#86efac;--success-400:#4ade80;--success-500:#22c55e;--success-600:#16a34a;--success-700:#15803d;--success-800:#166534;--success-900:#14532d;--warning-50:#fffbeb;--warning-100:#fef3c7;--warning-200:#fde68a;--warning-300:#fcd34d;--warning-400:#fbbf24;--warning-500:#f59e0b;--warning-600:#d97706;--warning-700:#b45309;--warning-800:#92400e;--warning-900:#78350f;--error-50:#fef2f2;--error-100:#fee2e2;--error-200:#fecaca;--error-300:#fca5a5;--error-400:#f87171;--error-500:#ef4444;--error-600:#dc2626;--error-700:#b91c1c;--error-800:#991b1b;--error-900:#7f1d1d;--neutral-50:#f8fafc;--neutral-100:#f1f5f9;--neutral-200:#e2e8f0;--neutral-300:#cbd5e1;--neutral-400:#94a3b8;--neutral-500:#64748b;--neutral-600:#475569;--neutral-700:#334155;--neutral-800:#1e293b;--neutral-900:#0f172a;--neutral-950:#020617;--bg-primary:var(--neutral-50);--bg-secondary:white;--text-primary:var(--neutral-900);--text-secondary:var(--neutral-600);--text-tertiary:var(--neutral-500);--border-color:var(--neutral-200);--hover-bg:var(--neutral-100);--primary-color:var(--primary-600);--primary-hover:var(--primary-700);--primary-active:var(--primary-800);--primary-bg:var(--primary-50);--success-color:var(--success-600);--success-hover:var(--success-700);--success-bg:var(--success-50);--warning-color:var(--warning-600);--warning-hover:var(--warning-700);--warning-bg:var(--warning-50);--error-color:var(--error-600);--error-hover:var(--error-700);--error-bg:var(--error-50);--focus-ring:#2563eb80;--overlay-bg:#00000080;--shadow-xs:0 1px 2px #1018280d;--shadow-sm:0 1px 3px #1018281a,0 1px 2px #1018280f;--shadow:0 4px 8px -2px #1018281a,0 2px 4px -2px #1018280f;--shadow-md:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;--shadow-lg:0 24px 48px -12px #1018282e;--shadow-xl:0 32px 64px -12px #10182824;--radius-xs:.25rem;--radius-sm:.375rem;--radius:.5rem;--radius-md:.75rem;--radius-lg:1rem;--radius-xl:1.5rem;--radius-full:9999px;--transition:all .2s cubic-bezier(.4,0,.2,1);--transition-slow:all .3s cubic-bezier(.4,0,.2,1);--font-code:"Fira Code",SFMono-Regular,Menlo,Monaco,Consolas,monospace;--font-sans:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;--font-xs:.75rem;--font-sm:.875rem;--font-base:1rem;--font-lg:1.125rem;--font-xl:1.25rem;--font-2xl:1.5rem;--font-3xl:1.875rem;--font-4xl:2.25rem;--font-5xl:3rem;--leading-none:1;--leading-tight:1.25;--leading-normal:1.5;--leading-loose:1.75;--content-width-xs:20rem;--content-width-sm:30rem;--content-width-md:45rem;--content-width-lg:60rem;--content-width-xl:75rem;--content-width-2xl:87.5rem;--spacing-0:0rem;--spacing-1:.25rem;--spacing-2:.5rem;--spacing-3:.75rem;--spacing-4:1rem;--spacing-5:1.25rem;--spacing-6:1.5rem;--spacing-8:2rem;--spacing-10:2.5rem;--spacing-12:3rem;--spacing-16:4rem;--spacing-20:5rem;--spacing-24:6rem}:root.dark{--bg-primary:var(--neutral-900);--bg-secondary:var(--neutral-800);--text-primary:var(--neutral-50);--text-secondary:var(--neutral-200);--text-tertiary:var(--neutral-300);--border-color:var(--neutral-700);--hover-bg:var(--neutral-700);--shadow-xs:0 1px 2px #0000004d;--shadow-sm:0 1px 3px #0006;--shadow:0 4px 8px -2px #0000004d;--shadow-md:0 12px 16px -4px #0006;--shadow-lg:0 24px 48px -12px #0009;--primary-bg:#3b82f626;--success-bg:#22c55e26;--warning-bg:#f59e0b26;--error-bg:#ef444426;--focus-ring:#3b82f6b3;--overlay-bg:#000000b3}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;height:100%;font-size:16px}body{font-family:var(--font-sans);background-color:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100%;line-height:1.5;transition:background-color .3s,color .3s}img,video,svg{max-width:100%;display:block}a{color:var(--primary-color);transition:var(--transition);text-decoration:none}a:hover{color:var(--primary-hover)}button,input,select,textarea{font-family:inherit;font-size:100%}button:focus,input:focus,select:focus,textarea:focus{outline:2px solid var(--focus-ring);outline-offset:2px}code,pre{font-family:var(--font-code)}.custom-scrollbar{scrollbar-width:thin;scrollbar-color:var(--neutral-300)transparent}.custom-scrollbar::-webkit-scrollbar{width:6px;height:6px}.custom-scrollbar::-webkit-scrollbar-track{background:0 0}.custom-scrollbar::-webkit-scrollbar-thumb{background-color:var(--neutral-300);border-radius:var(--radius-sm)}.dark .custom-scrollbar::-webkit-scrollbar-thumb{background-color:var(--neutral-700)}.custom-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--neutral-400)}.btn{border-radius:var(--radius);cursor:pointer;transition:var(--transition);background:var(--bg-secondary);color:var(--text-primary);border:none;border:1px solid var(--border-color);justify-content:center;align-items:center;gap:.5rem;padding:.625rem 1.25rem;font-size:.875rem;font-weight:500;display:inline-flex;position:relative;overflow:hidden}.btn:after{content:"";pointer-events:none;background:0 0;transition:background .2s;position:absolute;top:0;bottom:0;left:0;right:0}.btn:hover:after{background:#0000000d}.dark .btn:hover:after{background:#ffffff0d}.btn:active:after{background:#0000001a}.dark .btn:active:after{background:#ffffff1a}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-primary{background:var(--primary-color);color:#fff;border:none}.btn-primary:hover{background:var(--primary-hover);box-shadow:var(--shadow-sm);transform:translateY(-1px)}.btn-primary:active{background:var(--primary-active);transform:translateY(0)}.btn-secondary{background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-color)}.btn-secondary:hover{background:var(--hover-bg)}.btn-outline{color:var(--primary-color);background:0 0;border:1px solid}.btn-outline:hover{background:var(--primary-bg)}.btn-ghost{background:0 0;border:none}.btn-ghost:hover{background:var(--hover-bg)}.btn-danger{background:var(--error-color);color:#fff;border:none}.btn-danger:hover{background:var(--error-hover)}.btn-success{background:var(--success-color);color:#fff;border:none}.btn-success:hover{background:var(--success-hover)}.btn-icon{border-radius:var(--radius);padding:.5rem}.btn-sm{padding:.375rem .75rem;font-size:.75rem}.btn-lg{padding:.75rem 1.5rem;font-size:1rem}.input{border:1px solid var(--border-color);border-radius:var(--radius);background:var(--bg-secondary);width:100%;color:var(--text-primary);transition:var(--transition);font-family:var(--font-sans);padding:.625rem .875rem;font-size:.875rem}.input:focus{border-color:var(--primary-color);box-shadow:0 0 0 3px var(--focus-ring);outline:none}.input::placeholder{color:var(--text-secondary)}.card{background:var(--bg-secondary);border-radius:var(--radius-lg);border:1px solid var(--border-color);box-shadow:var(--shadow);transition:var(--transition);overflow:hidden}.card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.title{color:var(--text-primary);margin-bottom:.5rem;font-weight:600;line-height:1.2}.subtitle{color:var(--text-secondary);font-size:.875rem;line-height:1.4}.badge{border-radius:var(--radius-full);background:var(--neutral-100);color:var(--neutral-700);align-items:center;padding:.125rem .5rem;font-size:.75rem;font-weight:500;line-height:1.25;display:inline-flex}.badge-primary{background:var(--primary-bg);color:var(--primary-color)}.badge-success{background:var(--success-bg);color:var(--success-color)}.badge-warning{background:var(--warning-bg);color:var(--warning-color)}.badge-error{background:var(--error-bg);color:var(--error-color)}.glass{-webkit-backdrop-filter:blur(8px);background:#ffffffb3;border:1px solid #ffffff2e}.dark .glass{background:#1e293bcc;border:1px solid #1e293b2e}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideLeft{0%{opacity:0;transform:translate(10px)}to{opacity:1;transform:translate(0)}}@keyframes slideRight{0%{opacity:0;transform:translate(-10px)}to{opacity:1;transform:translate(0)}}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.animate-fadeIn{animation:.3s ease-out fadeIn}.animate-slideUp{animation:.4s ease-out slideUp}.animate-slideDown{animation:.4s ease-out slideDown}.animate-slideLeft{animation:.4s ease-out slideLeft}.animate-slideRight{animation:.4s ease-out slideRight}.animate-pulse{animation:2s cubic-bezier(.4,0,.6,1) infinite pulse}.animate-spin{animation:1s linear infinite spin}.animate-bounce{animation:1s infinite bounce}@media (max-width:768px){.section-header{flex-direction:column;gap:1rem;padding:1rem}.editor-container{padding:1rem;grid-template-columns:1fr!important;gap:1rem!important}.editor-panel{min-height:300px;height:auto!important}.panel-header{flex-direction:column;gap:.5rem;padding:.75rem!important}.toolbar{justify-content:space-between;width:100%}.action-btn{padding:.5rem .75rem!important;font-size:.875rem!important}.tool-group{flex-wrap:wrap;gap:.5rem}input,textarea{font-size:16px!important}.dropdown-menu{width:auto!important;position:fixed!important;left:1rem!important;right:1rem!important}.tool-container{padding:.75rem!important}.editor-panel{max-height:500px!important}.panel-header{padding:.75rem!important}.buttons{flex-wrap:wrap;flex-direction:row!important;gap:.5rem!important}}@media (hover:none){.button:active{background:var(--hover-bg)}.tool-card:active{transform:scale(.98)}}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.font-bold{font-weight:700}.font-semibold{font-weight:600}.font-medium{font-weight:500}.font-normal{font-weight:400}.text-primary{color:var(--text-primary)}.text-secondary{color:var(--text-secondary)}.text-tertiary{color:var(--text-tertiary)}.text-brand{color:var(--primary-color)}.text-success{color:var(--success-color)}.text-warning{color:var(--warning-color)}.text-error{color:var(--error-color)}.bg-primary{background-color:var(--bg-primary)}.bg-secondary{background-color:var(--bg-secondary)}.bg-brand{background-color:var(--primary-color)}.bg-success{background-color:var(--success-color)}.bg-warning{background-color:var(--warning-color)}.bg-error{background-color:var(--error-color)}.bg-hover{background-color:var(--hover-bg)}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:var(--spacing-1)}.gap-2{gap:var(--spacing-2)}.gap-4{gap:var(--spacing-4)}.w-full{width:100%}.h-full{height:100%}.p-0{padding:var(--spacing-0)}.p-1{padding:var(--spacing-1)}.p-2{padding:var(--spacing-2)}.p-4{padding:var(--spacing-4)}.m-0{margin:var(--spacing-0)}.m-1{margin:var(--spacing-1)}.m-2{margin:var(--spacing-2)}.m-4{margin:var(--spacing-4)}.mb-0{margin-bottom:var(--spacing-0)}.mb-1{margin-bottom:var(--spacing-1)}.mb-2{margin-bottom:var(--spacing-2)}.mb-4{margin-bottom:var(--spacing-4)}.rounded{border-radius:var(--radius)}.rounded-md{border-radius:var(--radius-md)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-full{border-radius:var(--radius-full)}.shadow-none{box-shadow:none}.shadow-xs{box-shadow:var(--shadow-xs)}.shadow-sm{box-shadow:var(--shadow-sm)}.shadow{box-shadow:var(--shadow)}.shadow-md{box-shadow:var(--shadow-md)}.shadow-lg{box-shadow:var(--shadow-lg)}.hidden{display:none}.invisible{visibility:hidden}.visible{visibility:visible}