:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;color:#213547;background-color:#fff;font-family:Microsoft JhengHei,system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}body{place-items:center;min-width:320px;min-height:100vh;margin:0;display:flex}#root{width:100%;margin:0 auto}body{color:#2d3436;-webkit-font-smoothing:antialiased;background-color:#f5f7fa;margin:0}.app-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:Segoe UI,Microsoft JhengHei,sans-serif}header{text-align:center;margin-bottom:40px}header h1{color:#1e272e;letter-spacing:-1px;margin:0;font-size:2.8rem;font-weight:800}.header-logo{justify-content:center;align-items:center;gap:15px;display:flex}.logo-icon{object-fit:contain;width:50px;height:50px}.header-badge{color:#0984e3;letter-spacing:1px;text-transform:uppercase;background-color:#e3f2fd;border:1px solid #bbdefb;border-radius:50px;margin-top:15px;padding:6px 18px;font-size:.85rem;font-weight:700;display:inline-block;box-shadow:0 2px 5px #00000008}main{grid-template-columns:1fr 1fr;align-items:start;gap:30px;display:grid}@media (width<=900px){main{grid-template-columns:1fr}}.left-panel,.right-panel{flex-direction:column;gap:20px;display:flex}.section-card{background:#fff;border:1px solid #00000005;border-radius:16px;padding:24px;box-shadow:0 4px 20px #0000000a}.section-title{color:#34495e;align-items:center;gap:8px;margin-bottom:20px;font-size:1.1rem;font-weight:700;display:flex}.blocks-container{justify-content:space-around;gap:15px;padding:10px 0;display:flex}.action-section{flex-direction:column;align-items:center;gap:15px;margin-top:10px;display:flex}.solve-button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#0984e3 0%,#00a8ff 100%);border:none;border-radius:12px;width:100%;max-width:300px;padding:16px 48px;font-size:1.1rem;font-weight:700;transition:all .3s;box-shadow:0 4px 15px #0984e34d}.solve-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0984e366}.solve-button:active{transform:translateY(0)}.reset-button{color:#95a5a6;cursor:pointer;background-color:#0000;border:2px solid #ecf0f1;border-radius:8px;padding:10px 24px;font-weight:600;transition:all .2s}.reset-button:hover{color:#7f8c8d;background-color:#ecf0f1}.animating-overlay{color:#0984e3;text-align:center;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#ffffffe6;border:2px solid #0984e3;border-radius:10px;margin-top:20px;padding:15px 25px;font-weight:700}.analyzing-status{color:#00b894;margin-top:15px;font-size:.9rem;font-weight:600;animation:2s ease-in-out infinite breathing}@keyframes breathing{0%{opacity:.4}50%{opacity:1}to{opacity:.4}}footer{text-align:center;border-top:1px solid #ecf0f1;margin-top:60px;padding-top:20px}footer p{color:#bdc3c7;font-size:.9rem}:root{--board-bg:#1e272e;--cell-empty:#2f3640;--cell-occupied:#0984e3;--cell-block-1:#eb4d4b;--cell-block-2:#f0932b;--cell-block-3:#6ab04c;--cell-clearing:#fff;--board-shadow:0 10px 25px #0003}.board-container{background:#fff;border-radius:12px;flex-direction:column;align-items:center;margin:20px 0;padding:20px;display:flex;box-shadow:0 4px 6px #0000000d}.board-label{color:#2c3e50;letter-spacing:1px;margin-bottom:20px;font-size:1.25rem;font-weight:700}.board-grid{background-color:var(--board-bg);box-shadow:var(--board-shadow);border:4px solid #34495e;border-radius:8px;grid-template-rows:repeat(8,44px);grid-template-columns:repeat(8,44px);gap:6px;padding:10px;display:grid}.cell{cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box;border-radius:4px;width:44px;height:44px;transition:all .2s cubic-bezier(.4,0,.2,1)}.cell:hover{filter:brightness(1.2);z-index:1;transform:scale(1.05)}.cell-state-0{background-color:var(--cell-empty);border:1px solid #ffffff0d}.cell-state-1{background-color:var(--cell-occupied);box-shadow:inset 0 0 10px #0003}.cell-state-2{background-color:var(--cell-block-1);box-shadow:inset 0 0 10px #0003}.cell-state-3{background-color:var(--cell-block-2);box-shadow:inset 0 0 10px #0003}.cell-state-4{background-color:var(--cell-block-3);box-shadow:inset 0 0 10px #0003}.cell-state-5{background-color:var(--cell-clearing);animation:.5s ease-in-out infinite flash;box-shadow:0 0 15px #fff}@keyframes flash{0%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.block-input-container{cursor:pointer;background:#f8f9fa;border:1px solid #edf2f7;border-radius:12px;flex-direction:column;align-items:center;width:140px;padding:12px;transition:all .2s;display:flex}.block-input-container:hover{background:#fff;border-color:#0984e3;transform:translateY(-2px);box-shadow:0 4px 12px #00000014}.block-title{color:#718096;text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px;font-size:.85rem;font-weight:700}.block-preview{background:#00000005;border-radius:8px;justify-content:center;align-items:center;width:110px;height:110px;display:flex}.no-shape{color:#a0aec0;text-align:center;font-size:.75rem;line-height:1.4}.shape-grid{grid-template-rows:repeat(5,18px);grid-template-columns:repeat(5,18px);gap:3px;display:grid}.shape-cell{border-radius:3px;width:18px;height:18px;transition:background-color .2s}.block-0 .filled{background-color:#eb4d4b}.block-1 .filled{background-color:#f0932b}.block-2 .filled{background-color:#6ab04c}.shape-cell.empty{background-color:#0000000d}.uploader-container{background-color:#fcfcfc;border:2px dashed #e2e8f0;border-radius:12px;flex-direction:column;align-items:center;margin:10px 0;padding:15px;transition:all .3s;display:flex}.uploader-container:hover{background-color:#f0fff4;border-color:#00b894}.upload-button{color:#fff;cursor:pointer;background-color:#00b894;border:none;border-radius:8px;padding:12px 24px;font-size:.95rem;font-weight:700;transition:all .2s;box-shadow:0 4px 6px #00b89433}.upload-button:hover{background-color:#00a383;transform:translateY(-1px);box-shadow:0 6px 12px #00b8944d}.upload-hint{color:#a0aec0;margin-top:12px;font-size:.8rem;font-weight:500}.modal-overlay{z-index:2000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#1e272ecc;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-content{text-align:center;background:#fff;border-radius:20px;width:100%;max-width:400px;padding:32px;box-shadow:0 20px 40px #0003}.modal-content h3{color:#1e272e;margin:0 0 10px;font-size:1.5rem;font-weight:800}.modal-hint{color:#7f8c8d;margin-bottom:24px;font-size:.95rem}.editor-grid{background-color:#1e272e;border-radius:12px;grid-template-rows:repeat(5,48px);grid-template-columns:repeat(5,48px);gap:8px;width:fit-content;margin:0 auto 30px;padding:12px;display:grid}.editor-cell{cursor:pointer;-webkit-user-select:none;user-select:none;background-color:#2f3640;border-radius:6px;justify-content:center;align-items:center;width:48px;height:48px;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex}.editor-cell:hover{filter:brightness(1.2);transform:scale(1.05)}.editor-cell.filled{background-color:#eb4d4b;box-shadow:inset 0 0 10px #0003}.modal-actions{flex-direction:column;gap:12px;display:flex}.save-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#0984e3 0%,#00a8ff 100%);border:none;border-radius:10px;padding:14px;font-size:1rem;font-weight:700;transition:all .2s;box-shadow:0 4px 12px #0984e333}.save-btn:hover{transform:translateY(-2px);box-shadow:0 6px 15px #0984e34d}.secondary-actions{grid-template-columns:1fr 1fr;gap:12px;display:grid}.clear-btn,.cancel-btn{color:#747d8c;cursor:pointer;background-color:#f1f2f6;border:none;border-radius:10px;padding:12px;font-weight:600;transition:all .2s}.clear-btn:hover,.cancel-btn:hover{color:#2f3542;background-color:#dfe4ea}.toast-container{z-index:9999;background:#fff;border-radius:12px;align-items:center;min-width:250px;padding:16px 24px;animation:.3s cubic-bezier(.4,0,.2,1) slideIn;display:flex;position:fixed;top:40px;right:40px;box-shadow:0 10px 25px #0000001a}.toast-content{color:#2c3e50;align-items:center;gap:12px;font-size:.95rem;font-weight:600;display:flex}.toast-icon{color:#fff;background:#eee;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;font-size:14px;display:flex}.toast-error{border-left:5px solid #eb4d4b}.toast-error .toast-icon{background:#eb4d4b}.toast-success{border-left:5px solid #00b894}.toast-success .toast-icon{background:#00b894}.toast-info{border-left:5px solid #0984e3}.toast-info .toast-icon{background:#0984e3}@keyframes slideIn{0%{opacity:0;transform:translate(50px)}to{opacity:1;transform:translate(0)}}.confirm-modal{max-width:350px!important;padding:30px!important}.confirm-actions{flex-direction:column;gap:10px;width:100%;display:flex}.confirm-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#00b894 0%,#00d2d3 100%);border:none;border-radius:10px;padding:14px;font-size:1rem;font-weight:700;transition:all .2s;box-shadow:0 4px 12px #00b89433}.confirm-btn:hover{transform:translateY(-2px);box-shadow:0 6px 15px #00b8944d}.confirm-actions .cancel-btn{font-size:.9rem;color:#95a5a6!important;background-color:#0000!important}