.timer-page{min-height:100vh;background:linear-gradient(135deg,#0f172a,#1e293b 50%,#0f172a);padding:20px}.timer-container{max-width:700px;margin:0 auto}.timer-header{text-align:center;margin-bottom:24px}.back-link{display:inline-block;color:#94a3b8;font-weight:700;margin-bottom:12px;transition:color .18s ease}.back-link:hover{color:#f1f5f9}.timer-header h1{margin:0;font-size:clamp(28px,5vw,42px);color:#f1f5f9;font-weight:900}.timer-header .subtitle{color:#94a3b8;font-size:1.1rem;margin-top:8px}.mode-toggle{display:flex;gap:8px;justify-content:center;margin-bottom:28px}.mode-btn{padding:12px 24px;border:2px solid #334155;border-radius:12px;background:transparent;color:#94a3b8;font-weight:800;cursor:pointer;transition:all .18s ease}.mode-btn:hover{border-color:#475569;color:#f1f5f9}.mode-btn.active{background:#3b82f6;border-color:#3b82f6;color:#fff}.timer-display{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;background:hsla(0,0%,100%,.05);border:3px solid #334155;border-radius:24px;margin-bottom:24px}.timer-display.complete{border-color:#22c55e;background:rgba(34,197,94,.1);animation:pulse-glow 1s ease-in-out infinite}@keyframes pulse-glow{0%,to{box-shadow:0 0 20px rgba(34,197,94,.3)}50%{box-shadow:0 0 40px rgba(34,197,94,.6)}}.timer-bot{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:24px}.timer-bot img{width:320px;height:320px;object-fit:contain;filter:drop-shadow(0 10px 30px rgba(0,0,0,.3))}.timer-bot img.floating{animation:float 2.5s ease-in-out infinite}.timer-bot .bot-name{font-size:1.4rem;font-weight:800;color:#8b5cf6;text-shadow:0 2px 10px rgba(139,92,246,.3)}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-15px)}}.time-text{font-size:clamp(56px,15vw,96px);font-weight:900;color:#f1f5f9;letter-spacing:4px;text-shadow:0 4px 20px rgba(0,0,0,.3)}.progress-bar-container{width:100%;margin-bottom:24px}.progress-bar-bg{width:100%;height:16px;background:#1e293b;border-radius:8px;overflow:hidden;border:2px solid #334155}.progress-bar-fill{height:100%;background:linear-gradient(90deg,#3b82f6,#22c55e);border-radius:6px;transition:width .5s ease;box-shadow:0 0 20px rgba(59,130,246,.5)}.progress-labels{display:flex;justify-content:space-between;margin-top:8px;font-size:.85rem;font-weight:600;color:#64748b}.timer-controls{display:flex;gap:12px;justify-content:center;margin-bottom:20px}.control-btn{padding:16px 40px;border:3px solid #111;border-radius:14px;font-weight:900;font-size:1.2rem;cursor:pointer;transition:all .18s ease;box-shadow:0 6px 16px rgba(0,0,0,.2),4px 4px 0 #000}.control-btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.3),6px 6px 0 #000}.control-btn.start{background:#22c55e;color:#fff}.control-btn.pause{background:#f59e0b;color:#fff}.control-btn.reset{background:#64748b;color:#fff}.custom-time-input{display:flex;justify-content:center;gap:12px;margin-bottom:20px}.custom-time-input input{width:180px;padding:14px 20px;font-size:1.1rem;font-weight:600;color:#f1f5f9;background:hsla(0,0%,100%,.1);border:2px solid #475569;border-radius:12px;outline:none;transition:all .2s}.custom-time-input input::placeholder{color:#64748b}.custom-time-input input:focus{border-color:#3b82f6;background:rgba(59,130,246,.1)}.custom-time-input input::-webkit-inner-spin-button,.custom-time-input input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.custom-time-input button{padding:14px 28px;font-size:1rem;font-weight:700;color:#fff;background:linear-gradient(135deg,#3b82f6,#2563eb);border:none;border-radius:12px;cursor:pointer;transition:all .2s}.custom-time-input button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px rgba(59,130,246,.4)}.custom-time-input button:disabled{opacity:.5;cursor:not-allowed}.add-time{display:flex;gap:8px;justify-content:center;margin-bottom:16px}.add-time button{padding:10px 18px;border:2px solid #475569;border-radius:10px;background:transparent;color:#94a3b8;font-weight:700;font-size:1rem;cursor:pointer;transition:all .18s ease}.add-time button:hover{border-color:#3b82f6;color:#3b82f6;background:rgba(59,130,246,.1)}.presets{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;margin-bottom:24px}.preset-label{color:#64748b}.preset-btn,.preset-label{font-weight:700;font-size:.95rem}.preset-btn{padding:10px 16px;border:2px solid #334155;border-radius:10px;background:hsla(0,0%,100%,.05);color:#cbd5e1;cursor:pointer;transition:all .18s ease}.preset-btn:hover{border-color:#3b82f6;background:rgba(59,130,246,.1);color:#3b82f6}.timer-tip{text-align:center;padding:16px 20px;background:linear-gradient(135deg,#8b5cf6,#7c3aed);border-radius:14px;color:#fff;font-weight:600;font-size:1rem}.timer-tip strong{font-weight:800}@media (max-width:600px){.timer-bot img{width:200px;height:200px}.custom-time-input{flex-direction:column;align-items:center}.custom-time-input input{width:100%;max-width:250px}}