*{box-sizing:border-box;margin:0;padding:0}body{font-family:'Arial',sans-serif;background:#f4f6f8;color:#333;line-height:1.5}.app{max-width:700px;margin:20px auto;padding:20px}h1{text-align:center;font-size:2.2rem;color:#1e293b;margin-bottom:20px}h2{font-size:1.5rem;margin-bottom:15px;text-align:center;color:#1e293b}.tabs{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:15px}.tab{padding:10px 20px;border-radius:6px;border:none;cursor:pointer;background:#3b82f6;color:#fff;font-weight:700;transition:0.3s}.tab.active{background:#1e40af}.toggle{display:flex;justify-content:center;gap:10px;margin-bottom:20px}.toggle button{padding:8px 16px;border-radius:6px;border:none;cursor:pointer;background:#cbd5e1;font-weight:700;transition:0.3s}.toggle button.active{background:#3b82f6;color:#fff}.panel{display:none;background:#fff;padding:20px;border-radius:8px;box-shadow:0 5px 15px rgb(0 0 0 / .1);margin-bottom:20px}.panel.active{display:block}.time-row,.grid{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:15px}input[type=number]{width:100px;padding:8px 10px;border-radius:6px;border:1px solid #cbd5e1;text-align:center;font-size:1rem;transition:0.3s}input[type=number]:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 5px rgb(59 130 246 / .3)}button{padding:10px 18px;border-radius:6px;font-size:1rem;cursor:pointer;font-weight:700;border:none;transition:0.3s}button.primary{background:#3b82f6;color:#fff}button.primary:hover{background:#1e40af}button.danger{background:#ef4444;color:#fff}button.danger:hover{background:#b91c1c}button.ghost{background:#e5e7eb;color:#1e293b}button.ghost:hover{background:#d1d5db}.addRowContainer{display:flex;justify-content:center;margin-bottom:15px}.actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:15px}.result{text-align:center;font-weight:700;font-size:1.2rem;color:#1e293b;margin-bottom:10px}.error{text-align:center;color:#ef4444;font-weight:700}.history pre{background:#f1f5f9;border:1px dashed #cbd5e1;padding:15px;border-radius:6px;min-height:100px;white-space:pre-wrap;font-family:monospace;margin-bottom:10px}@media (max-width:640px){input[type=number]{width:100%;max-width:120px}.time-row,.grid{flex-direction:column;align-items:center}.actions,.tabs,.toggle,.addRowContainer{flex-direction:column;gap:10px;width:100%;align-items:center}button{width:90%;max-width:300px}}button.success{background:#22c55e!important;color:#fff!important}