.editor-app{font-family:Arial,sans-serif;margin:0;background:#f5f5f5}.editor-fullscreen{display:flex;height:calc(100vh - 53px);background:#f5f5f5}.tool-sidebar{width:260px;background:linear-gradient(180deg,#2c3e50,#34495e);padding:20px;display:flex;flex-direction:column;gap:20px;border-right:1px solid #1a252f;box-shadow:inset -1px 0 #ffffff1a;overflow-y:auto}.sidebar-logo{text-align:center}.sidebar-logo img{display:block;margin:0 auto}.flag-title{position:absolute;top:20px;left:50%;transform:translate(-50%);z-index:10;background:#fffffff2;backdrop-filter:blur(10px);padding:8px 20px;border-radius:20px;box-shadow:0 4px 16px #0000001a;border:1px solid rgba(0,0,0,.1)}.flag-title h2{color:#2c3e50;font-size:18px;font-weight:600;margin:0;text-align:center}.round-indicator{color:#7f8c8d;font-size:12px;font-weight:500;margin-bottom:4px;text-align:center;text-shadow:0 1px 2px rgba(255,255,255,.8)}.canvas-workspace{flex:1;background:linear-gradient(135deg,#f8f9fa,#e9ecef);display:flex;align-items:center;justify-content:center;padding:40px;position:relative}.canvas-workspace:before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 20px 20px,#dee2e6 1px,transparent 1px);background-size:20px 20px;opacity:.5;pointer-events:none}.canvas-container{position:relative;background:#fff;border-radius:8px;box-shadow:0 8px 24px #0000001f,0 4px 8px #00000014;overflow:hidden;border:1px solid #dee2e6;z-index:1;max-width:90vw;max-height:80vh}.drawing-area{position:relative;padding:50px;cursor:crosshair}.canvas-container canvas{position:absolute}#drawingCanvas{z-index:2}#referenceCanvas{z-index:1}.tool-sidebar .opacity-control{display:flex;flex-direction:column;gap:10px;margin:0;padding:16px;background:#2c3e504d;border-radius:8px;border:1px solid rgba(255,255,255,.1)}.tool-sidebar .opacity-control label{font-size:11px;color:#bdc3c7;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.tool-sidebar .opacity-control input{width:100%;height:6px;border-radius:3px;background:#34495e;outline:none;-webkit-appearance:none;cursor:pointer}.tool-sidebar .opacity-control input::-webkit-slider-thumb{appearance:none;width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,#f39c12,#e67e22);cursor:pointer;box-shadow:0 2px 6px #f39c1266;transition:all .2s ease}.tool-sidebar .opacity-control input::-webkit-slider-thumb:hover{transform:scale(1.1);box-shadow:0 4px 12px #f39c1299}.tool-sidebar .opacity-control span{font-size:14px;text-align:center;color:#f39c12;font-weight:600;background:#f39c121a;padding:6px;border-radius:4px}canvas{border:2px solid #ddd;cursor:crosshair;display:block;margin:0 auto}.tool-sidebar .controls{display:flex;flex-direction:column;gap:8px;margin:0}.tool-sidebar .controls .tool-btn{padding:12px 16px;font-size:12px;width:100%;border-radius:8px;background:#34495ecc;color:#ecf0f1;border:1px solid rgba(255,255,255,.1);transition:all .2s ease;font-weight:500;position:relative;overflow:hidden}.tool-sidebar .controls .tool-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left .5s ease}.tool-sidebar .controls .tool-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #0003}.tool-sidebar .controls .tool-btn:hover:before{left:100%}.tool-sidebar .controls .tool-btn.clear{background:linear-gradient(135deg,#e74c3c,#c0392b);border-color:#c0392b}.tool-sidebar .controls .tool-btn.clear:hover{box-shadow:0 4px 12px #e74c3c66}.tool-sidebar .controls .tool-btn.primary{background:linear-gradient(135deg,#27ae60,#219a52);border-color:#219a52}.tool-sidebar .controls .tool-btn.primary:hover{box-shadow:0 4px 12px #27ae6066}.tool-sidebar .controls .tool-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.floating-colors{position:absolute;bottom:40px;left:50%;transform:translate(-50%);z-index:10;background:#fffffff2;backdrop-filter:blur(10px);padding:12px 16px;border-radius:20px;box-shadow:0 4px 16px #0000001a;border:1px solid rgba(0,0,0,.1)}.floating-colors .controls{display:flex;gap:8px;margin:0;padding:0;background:none;border-radius:0;box-shadow:none}.color-btn{width:40px;height:40px;border:2px solid rgba(0,0,0,.1);border-radius:50%;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 8px #00000026}.color-btn:hover{transform:scale(1.1);box-shadow:0 4px 16px #00000040;border-color:#0003}.color-btn.active{border-color:#3498db;border-width:3px;transform:scale(1.1);box-shadow:0 0 0 2px #3498db4d,0 4px 16px #00000040}.tool-btn{padding:12px 24px;background:#4caf50;color:#fff;border:none;border-radius:25px;cursor:pointer;font-size:16px;font-weight:700;transition:all .3s ease;box-shadow:0 4px 12px #0003}.tool-btn:hover{background:#45a049;transform:translateY(-2px);box-shadow:0 6px 20px #0000004d}.tool-btn.clear{background:#f44336}.tool-btn.clear:hover{background:#da190b}.tool-btn.active{background:#2196f3;transform:translateY(-2px);box-shadow:0 6px 20px #2196f366}.tool-sidebar .tools-section:before{content:"Tools";display:block;color:#bdc3c7;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px}.tool-sidebar .tools{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:0}.tool-sidebar .tools .tool-btn{display:flex;flex-direction:column;align-items:center;padding:12px 8px;font-size:10px;background:#34495ecc;color:#ecf0f1;width:100%;text-align:center;border-radius:8px;border:1px solid rgba(255,255,255,.1);transition:all .2s ease;position:relative;overflow:hidden}.tool-sidebar .tools .tool-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left .5s ease}.tool-sidebar .tools .tool-btn:hover{background:#3498dbcc;transform:translateY(-1px);box-shadow:0 4px 12px #3498db4d;border-color:#3498db80}.tool-sidebar .tools .tool-btn:hover:before{left:100%}.tool-sidebar .tools .tool-btn.active{background:linear-gradient(135deg,#3498db,#2980b9);color:#fff;transform:translateY(-1px);box-shadow:0 4px 12px #3498db66;border-color:#2980b9}.tool-sidebar .tools .tool-btn .tool-icon{font-size:16px;margin-bottom:4px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}.tool-sidebar .tools .tool-btn .tool-name{font-weight:500;text-shadow:0 1px 2px rgba(0,0,0,.3)}.tools-section{border-top:1px solid #bdc3c730;padding-top:10px}.modal-score{font-weight:700;transition:all .3s ease}.modal-score.excellent{color:#27ae60;text-shadow:0 0 20px rgba(39,174,96,.3)}.modal-score.good{color:#f39c12;text-shadow:0 0 20px rgba(243,156,18,.3)}.modal-score.fair{color:#e67e22;text-shadow:0 0 20px rgba(230,126,34,.3)}.modal-score.poor{color:#e74c3c;text-shadow:0 0 20px rgba(231,76,60,.3)}.modal-content .modal-emoji{line-height:1}.help-button-float{position:absolute;top:20px;right:20px;width:36px;height:36px;background:#fffffff2;backdrop-filter:blur(10px);border-radius:50%;box-shadow:0 4px 16px #0000001a;border:1px solid rgba(0,0,0,.1);color:#2c3e50;font-size:18px;font-weight:600;cursor:pointer;transition:all .3s ease;z-index:10;display:flex;align-items:center;justify-content:center}.help-button-float:hover{transform:translateY(-1px);box-shadow:0 6px 20px #00000026;background:#fff;border-color:#3498db4d}.help-button-float:active{transform:translateY(0);box-shadow:0 2px 8px #0000001a}.mobile-menu-button{position:absolute;top:20px;left:20px;width:50px;height:50px;border-radius:50%;background:#fffffff2;backdrop-filter:blur(10px);border:1px solid rgba(0,0,0,.1);box-shadow:0 4px 16px #00000026;cursor:pointer;transition:all .3s ease;z-index:1001;display:none;align-items:center;justify-content:center;padding:8px}.mobile-menu-button:hover{transform:scale(1.05);box-shadow:0 6px 20px #0003}.menu-icon{width:24px;height:24px;color:#2c3e50;transition:color .2s ease}.mobile-menu-button:hover .menu-icon{color:#3498db}.mobile-sidebar-close{display:none;position:absolute;top:20px;right:20px;width:40px;height:40px;border-radius:50%;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#ecf0f1;cursor:pointer;transition:all .3s ease;z-index:1003;align-items:center;justify-content:center}.mobile-sidebar-close:hover{background:#e74c3ccc;border-color:#e74c3c;transform:scale(1.05)}.help-modal-content{animation:modalSlideIn .3s ease-out}@keyframes modalSlideIn{0%{opacity:0;transform:scale(.8) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}.comparison-section{background:#f8f9fa;padding:20px;border-radius:16px;border:1px solid #e9ecef}.comparison-title{color:#495057;margin-bottom:16px}.canvas-comparison{margin-bottom:20px}.comparison-container{position:relative;display:inline-block;border-radius:8px;overflow:hidden;box-shadow:0 4px 12px #0000001a;border:1px solid #dee2e6;background:#fff}.comparison-canvas{display:block;max-width:300px;max-height:200px;width:auto;height:auto}#modalDrawingCanvas{position:absolute;top:0;left:0;z-index:2}#modalReferenceCanvas{position:relative;z-index:1}.comparison-labels{display:flex;justify-content:space-between;margin-top:12px;padding:0 8px;font-size:14px;font-weight:500}.label-drawing{color:#3498db}.label-reference{color:#e74c3c}.opacity-slider-container{margin-top:20px}.slider-label{display:block;font-size:14px;font-weight:500;color:#495057;margin-bottom:8px}.modal-slider{width:100%;height:6px;border-radius:3px;background:linear-gradient(to right,#3498db 0% 50%,#e74c3c 50% 100%);outline:none;-webkit-appearance:none;cursor:pointer;margin-bottom:8px}.modal-slider::-webkit-slider-thumb{appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 2px 6px #0000004d;border:2px solid #6c757d;transition:all .2s ease}.modal-slider::-webkit-slider-thumb:hover{transform:scale(1.1);box-shadow:0 4px 12px #0006}.slider-labels{display:flex;justify-content:space-between;font-size:12px;color:#6c757d;padding:0 4px}.tool-sidebar .brush-size{display:flex;flex-direction:column;gap:8px;margin:0;padding:16px;background:#2c3e504d;border-radius:8px;border:1px solid rgba(255,255,255,.1)}.brush-size-header{display:flex;justify-content:space-between;align-items:center}.tool-sidebar .brush-size label{font-size:11px;color:#bdc3c7;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin:0}.tool-sidebar .brush-size input{width:100%;height:6px;border-radius:3px;background:#34495e;outline:none;-webkit-appearance:none;cursor:pointer}.tool-sidebar .brush-size input::-webkit-slider-thumb{appearance:none;width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,#3498db,#2980b9);cursor:pointer;box-shadow:0 2px 6px #3498db66;transition:all .2s ease}.tool-sidebar .brush-size input::-webkit-slider-thumb:hover{transform:scale(1.1);box-shadow:0 4px 12px #3498db99}.tool-sidebar .brush-size span{font-size:12px;color:#3498db;font-weight:600;background:#3498db1a;padding:4px 8px;border-radius:4px;min-width:24px;text-align:center}@media (max-width: 768px){.editor-fullscreen{flex-direction:row!important}.modal-content{max-width:90vw;padding:24px}.comparison-canvas{max-width:250px;max-height:150px}.comparison-labels{font-size:12px}.help-button-float{top:15px;right:15px;width:32px;height:32px;font-size:16px}.help-modal-content{padding:24px;max-width:95vw}.mobile-menu-button{display:flex}.tool-sidebar{display:none!important;position:fixed;top:0;left:0;width:100vw;height:100vh;background:#1a252ffa;backdrop-filter:blur(10px);z-index:1002;padding:80px 20px 20px;flex-direction:column;gap:20px;overflow-y:auto}.tool-sidebar.mobile-open{display:flex!important}.canvas-workspace{flex:1;width:100%}.tool-sidebar.mobile-open .sidebar-logo{text-align:center}.tool-sidebar.mobile-open .mobile-sidebar-close{display:flex!important}.tool-sidebar.mobile-open .brush-size{padding:8px 20px!important;margin-bottom:10px!important;background:#ffffff0d!important;border-radius:8px!important;flex-grow:0}.tool-sidebar.mobile-open .brush-size h3{font-size:12px!important;margin-bottom:4px!important;display:inline-block!important;margin-right:8px!important}.tool-sidebar.mobile-open .brush-size span{font-size:12px!important;display:inline-block!important}.tool-sidebar.mobile-open .brush-size input{margin:3px 0!important;height:6px!important}.tool-sidebar.mobile-open .controls{display:flex!important;flex-direction:column!important;gap:8px!important;margin-top:15px}.tool-sidebar.mobile-open .controls button{height:60px!important;font-size:16px!important;font-weight:600!important}.drawing-area{padding:10px!important}.tool-sidebar .tools{grid-template-columns:repeat(6,1fr);gap:4px}.tool-sidebar .tools .tool-btn{padding:6px 2px}.tool-sidebar .tools .tool-btn .tool-icon{font-size:14px}.tool-sidebar .tools .tool-btn .tool-name{font-size:8px}.brush-size,.sidebar-colors,.controls{flex:1;min-width:120px}.floating-colors{position:absolute!important;bottom:20px;left:50%;transform:translate(-50%);margin-top:0;padding:8px 12px;backdrop-filter:blur(10px);background:#fffffff2}.floating-colors .controls{gap:6px;justify-content:center}.color-btn{width:32px;height:32px}.tool-sidebar .controls{flex-direction:row;gap:4px}.tool-sidebar .controls .tool-btn{padding:6px 8px;font-size:10px}.canvas-workspace{padding:15px}}