:root{--primary-color:#f36;--secondary-color:#3cf;--tertiary-color:#93f;--glass-bg:#ffffffd9;--glass-border:#fff6;--glass-shadow:0 8px 32px 0 #1f268726;--text-dark:#1a1a2e;--text-light:#557;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}body{background:linear-gradient(135deg, var(--secondary-color), var(--primary-color), var(--tertiary-color));min-height:100vh;color:var(--text-dark);background-size:400% 400%;justify-content:center;align-items:center;margin:0;animation:15s infinite gradientBG;display:flex}@keyframes gradientBG{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}#root{box-sizing:border-box;width:100%;max-width:1200px;height:100vh;padding:2rem;display:flex}.app-container{flex-direction:row;gap:2rem;width:100%;height:100%;display:flex}.glass-panel{background:var(--glass-bg);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);border-radius:24px;flex-direction:column;padding:2rem;display:flex;overflow:hidden}.sidebar{flex:1;min-width:300px;max-width:350px;overflow-y:auto}.main-content{flex-direction:column;flex:3;justify-content:center;align-items:center;display:flex;position:relative}h1,h2,h3{color:var(--text-dark);margin-top:0}h1{background:-webkit-linear-gradient(45deg, var(--primary-color), var(--tertiary-color));-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:1.5rem;font-size:1.8rem;font-weight:800}.form-group{flex-direction:column;gap:.5rem;margin-bottom:1.2rem;display:flex}label{color:var(--text-light);font-size:.9rem;font-weight:600}select,input{color:var(--text-dark);background:#ffffffe6;border:2px solid #0000000d;border-radius:12px;outline:none;padding:.8rem 1rem;font-family:inherit;font-size:1rem;transition:all .3s}select:focus,input:focus{border-color:var(--primary-color);box-shadow:0 0 0 3px #f363}.btn{background:linear-gradient(45deg, var(--primary-color), var(--tertiary-color));color:#fff;cursor:pointer;border:none;border-radius:12px;justify-content:center;align-items:center;gap:.5rem;margin-top:1rem;padding:1rem 1.5rem;font-size:1.1rem;font-weight:700;transition:transform .2s,box-shadow .2s;display:flex}.btn:hover{transform:translateY(-2px);box-shadow:0 10px 20px #00000026}.btn:active{transform:translateY(0)}.preview-container{background:#f8f9fa;border:2px dashed #ddd;border-radius:16px;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative;overflow:hidden}.preview-page{background:#fff;position:relative;overflow:hidden;box-shadow:0 4px 12px #00000014}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#0000001a;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#0003}.coloring-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:15px;width:100%;display:grid}