@import"https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&display=swap";:root{--font-family: "Fredoka", "PingFang TC", "Microsoft JhengHei", sans-serif;--bg-gradient: linear-gradient(135deg, #e0f2fe 0%, #fef3c7 50%, #fae8ff 100%);--primary-color: #3b82f6;--primary-hover: #2563eb;--accent-color: #f59e0b;--success-color: #10b981;--danger-color: #ef4444;--card-bg: #ffffff;--shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);--shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, .1)}*{box-sizing:border-box;margin:0;padding:0;user-select:none;-webkit-user-select:none}body{font-family:var(--font-family);background:var(--bg-gradient);min-height:100vh;display:flex;flex-direction:column;color:#1e293b;overflow-x:hidden}#confetti-canvas{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:999}.app-header{background:#ffffffd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:12px 24px;display:flex;justify-content:space-between;align-items:center;box-shadow:var(--shadow-sm);border-bottom:3px solid #cbd5e1}.logo-container{display:flex;align-items:center;gap:12px}.logo-icon{font-size:2rem;animation:bounce 2s infinite ease-in-out}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.app-title{font-size:1.5rem;font-weight:700;color:#1e3a8a;letter-spacing:.5px}.header-actions{display:flex;gap:10px}.btn-icon{background:#fff;border:2px solid #e2e8f0;border-radius:50%;width:44px;height:44px;font-size:1.3rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;box-shadow:var(--shadow-sm)}.btn-icon:hover{transform:scale(1.1);border-color:var(--primary-color)}.main-container{max-width:1000px;width:100%;margin:0 auto;padding:16px;flex:1;display:flex;flex-direction:column;gap:20px}.control-banner{background:var(--card-bg);border-radius:20px;padding:16px 20px;box-shadow:var(--shadow-sm);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;border:2px solid #e2e8f0}.preset-selector{display:flex;align-items:center;gap:10px}.preset-label{font-weight:600;font-size:1rem;color:#334155}.select-dropdown{padding:8px 16px;font-family:inherit;font-size:1rem;font-weight:600;border-radius:12px;border:2px solid #cbd5e1;background-color:#f8fafc;color:#0f172a;cursor:pointer;outline:none;transition:border-color .2s ease}.select-dropdown:focus{border-color:var(--primary-color)}.btn-teacher-mode{background:linear-gradient(135deg,#a855f7,#7e22ce);color:#fff;border:none;border-radius:12px;padding:8px 16px;font-family:inherit;font-weight:600;font-size:.95rem;cursor:pointer;box-shadow:0 4px 10px #a855f74d;transition:transform .2s ease}.btn-teacher-mode:hover{transform:translateY(-2px)}.preset-description{width:100%;background:#f1f5f9;border-radius:12px;padding:10px 14px;font-size:.95rem;color:#475569;border-left:4px solid var(--accent-color)}.triangle-area{background:var(--card-bg);border-radius:24px;padding:24px 16px;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;align-items:center;gap:18px;position:relative;border:3px solid #ffffff}.triangle-row{display:flex;align-items:center;justify-content:center;gap:16px;position:relative;width:100%}.row-circles{display:flex;justify-content:center;gap:16px}.row-sum-badge{position:absolute;right:12px;display:flex;align-items:center;gap:6px;padding:6px 14px;border-radius:20px;font-size:.95rem;font-weight:700;background:#f1f5f9;border:2px solid #cbd5e1;color:#475569;transition:all .3s cubic-bezier(.34,1.56,.64,1);box-shadow:var(--shadow-sm)}@media (max-width: 768px){.row-sum-badge{position:static;margin-top:4px}.triangle-row{flex-direction:column;gap:6px}}.row-sum-badge.matched{background:#dcfce7;border-color:#22c55e;color:#15803d;transform:scale(1.05)}.row-sum-badge.exceeded{background:#fee2e2;border-color:#ef4444;color:#b91c1c;animation:shake .3s ease}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}.circle-slot{width:72px;height:72px;border-radius:50%;background:#f8fafc;border:3px dashed #cbd5e1;display:flex;align-items:center;justify-content:center;font-size:1.8rem;font-weight:700;color:#1e293b;cursor:pointer;position:relative;transition:all .25s cubic-bezier(.34,1.56,.64,1);box-shadow:inset 0 2px 4px #0000000d}.circle-slot:hover:not(.locked){border-color:var(--primary-color);transform:scale(1.08);background:#eff6ff}.circle-slot.drag-over{border-color:var(--accent-color);background:#fef3c7;transform:scale(1.15)}.circle-slot.filled{border-style:solid;border-color:#3b82f6;background:linear-gradient(135deg,#fff,#eff6ff);box-shadow:var(--shadow-sm),0 0 0 3px #3b82f633}.circle-slot.locked{border-style:solid;border-color:#64748b;background:#e2e8f0;color:#334155;cursor:not-allowed}.circle-slot.locked:after{content:"🔒";position:absolute;top:-4px;right:-4px;font-size:.9rem}.circle-slot.suggested{animation:pulse-border 1.5s infinite}@keyframes pulse-border{0%,to{border-color:#f59e0b;box-shadow:0 0 #f59e0bb3}50%{border-color:#d97706;box-shadow:0 0 0 10px #f59e0b00}}.number-bank-section{background:var(--card-bg);border-radius:20px;padding:16px 20px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;align-items:center;gap:12px;border:2px solid #e2e8f0}.bank-title{font-size:1rem;font-weight:600;color:#475569}.number-bank{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}.number-card{width:54px;height:54px;border-radius:16px;background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;font-size:1.6rem;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:grab;transition:all .2s ease;box-shadow:0 4px 8px #3b82f64d}.number-card:hover:not(.disabled){transform:translateY(-4px) scale(1.1);box-shadow:0 6px 12px #3b82f666}.number-card.selected{outline:4px solid var(--accent-color);transform:translateY(-6px) scale(1.15);box-shadow:0 8px 16px #f59e0b80}.number-card.disabled{background:#cbd5e1;color:#94a3b8;cursor:not-allowed;box-shadow:none;opacity:.5}.toolbar-actions{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}.btn-action{padding:12px 24px;border-radius:16px;font-family:inherit;font-size:1.1rem;font-weight:700;border:none;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .2s ease;box-shadow:var(--shadow-sm)}.btn-hint{background:#fef08a;color:#854d0e;border:2px solid #facc15}.btn-hint:hover{background:#fde047;transform:translateY(-2px)}.btn-reset{background:#f1f5f9;color:#475569;border:2px solid #cbd5e1}.btn-reset:hover{background:#e2e8f0;transform:translateY(-2px)}.btn-check{background:linear-gradient(135deg,#10b981,#047857);color:#fff;box-shadow:0 4px 12px #10b98166}.btn-check:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 6px 16px #10b98180}.modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#0f172a99;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;pointer-events:none;transition:opacity .3s ease}.modal-overlay.active{opacity:1;pointer-events:auto}.modal-card{background:#fff;border-radius:24px;padding:32px;max-width:480px;width:90%;box-shadow:0 20px 25px -5px #0003;text-align:center;transform:scale(.8);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}.modal-overlay.active .modal-card{transform:scale(1)}.modal-icon{font-size:3.5rem;margin-bottom:12px}.modal-title{font-size:1.6rem;color:#1e293b;margin-bottom:12px}.modal-body{font-size:1.05rem;color:#475569;margin-bottom:24px;line-height:1.6}.modal-actions{display:flex;justify-content:center;gap:12px}.form-group{display:flex;flex-direction:column;gap:6px;text-align:left;margin-bottom:16px}.form-label{font-weight:600;font-size:.95rem;color:#334155}.form-input{padding:10px 14px;font-family:inherit;font-size:1rem;border-radius:10px;border:2px solid #cbd5e1;outline:none}.form-input:focus{border-color:var(--primary-color)}