@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap";:root{--bg-gradient:linear-gradient(135deg, #0f172a 0%, #1e293b 100%);--glass-bg:#ffffff0d;--glass-border:#ffffff26;--glass-shadow:0 8px 32px 0 #0006;--primary:#a855f7;--primary-glow:#a855f799;--secondary:#3b82f6;--accent:#38bdf8;--text-main:#fff;--text-muted:#cbd5e1}body{color:var(--text-main);letter-spacing:.3px;background-color:#020617;margin:0;padding:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-weight:500;overflow:hidden}@keyframes arenaBreathe{0%{background-position:0 0;background-size:105%}to{background-position:100% 100%;background-size:115%}}@keyframes flowEnergy{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}.app-container{background-image:url(/Ai-Pomodoro-App/assets/top_arena-BXkiJMLz.png);background-position:50%;background-size:105%;width:100vw;height:100vh;animation:60s ease-in-out infinite alternate arenaBreathe;display:flex;position:relative}h1,h2,h3,h4{text-shadow:0 2px 10px #fff3, 0 4px 25px var(--primary-glow);margin:0}.app-container:before{content:"";z-index:0;opacity:1;pointer-events:none;background:#08102873;width:100%;height:100%;transition:background-color 1.5s ease-in-out;position:fixed;top:0;left:0}.app-container.focus-mode:before{background-color:#000000d9}.app-container.focus-mode .panel-left{opacity:.3}.app-container.focus-mode .panel-left:hover{opacity:1}.canvas-container{z-index:1;width:100%;height:100%;position:absolute;top:0;left:0}.ui-layer{box-sizing:border-box;z-index:10;pointer-events:none;justify-content:space-between;width:100%;height:100%;padding:2rem;display:flex;position:absolute;top:0;left:0}.panel{pointer-events:auto;background:var(--glass-bg);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);border-radius:24px;flex-direction:column;gap:1.5rem;padding:2rem;transition:box-shadow .3s,opacity 1s ease-in-out;display:flex;position:relative}.panel:hover{box-shadow:0 12px 40px 0 #00000080, 0 0 20px var(--glass-border)}.panel-wrapper{transition:transform .5s cubic-bezier(.4,0,.2,1);display:flex;position:relative}.panel-wrapper:not(.closed):hover{transform:translateY(-2px)}.panel-wrapper-left.closed{transform:translate(calc(-100% - 2rem))}.panel-wrapper-right.closed{transform:translate(calc(100% + 2rem))}.toggle-btn{-webkit-backdrop-filter:blur(10px);border:1px solid var(--primary);cursor:pointer;color:#fff;z-index:20;pointer-events:auto;background:#0ea5e933;justify-content:center;align-items:center;width:48px;height:120px;font-size:20px;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;position:absolute;top:50%;transform:translateY(-50%)}.toggle-btn:hover{background:var(--primary);box-shadow:0 0 15px var(--primary-glow)}.toggle-left{border-left:none;border-radius:0 16px 16px 0;right:-48px}.toggle-right{border-right:none;border-radius:16px 0 0 16px;left:-48px}.panel-left{resize:horizontal;width:320px;min-width:250px;max-width:50vw;overflow:hidden}.panel-right{resize:horizontal;direction:rtl;width:380px;min-width:300px;max-width:50vw;overflow:hidden}.panel-right>*{direction:ltr}@keyframes pulseGlow{0%{box-shadow:0 0 10px var(--primary-glow)}50%{box-shadow:0 0 25px var(--primary)}to{box-shadow:0 0 10px var(--primary-glow)}}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-5px)}to{transform:translateY(0)}}button{background:linear-gradient(135deg, var(--primary), var(--secondary));color:#fff;cursor:pointer;box-shadow:0 4px 15px var(--primary-glow);background-size:200% 200%;border:none;border-radius:12px;padding:.75rem 1.5rem;font-weight:600;transition:all .3s;animation:4s infinite flowEnergy}button:hover{box-shadow:0 8px 25px var(--primary-glow);filter:brightness(1.15);transform:translateY(-2px)}button.outline{border:1px solid var(--primary);box-shadow:none;background:0 0;animation:none}button.outline:hover{box-shadow:0 0 15px var(--primary-glow);background:#8b5cf61a}h1,h2,h3{background:linear-gradient(to right, #fff, var(--text-muted));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin:0;font-weight:800}.chat-box{border:1px solid var(--glass-border);background:#0003;border-radius:16px;flex-direction:column;flex:1;gap:.5rem;padding:1rem;display:flex;overflow-y:auto}.input-field{-webkit-backdrop-filter:blur(10px);color:#fff;background:#ffffff08;border:1px solid #ffffff1a;border-bottom:2px solid #ffffff40;border-radius:12px;outline:none;width:100%;padding:1rem;font-size:1rem;transition:all .3s;box-shadow:inset 0 2px 5px #0003}.input-field:focus{border-color:#ffffff1a;border-bottom-color:var(--primary);box-shadow:0 6px 20px var(--primary-glow), inset 0 2px 5px #0003;background:#ffffff14;transform:translateY(-2px)}.task-item{cursor:pointer;background:#ffffff0a;border:1px solid #ffffff14;border-radius:12px;align-items:center;gap:12px;padding:1.25rem 1rem;transition:all .2s;display:flex}.task-item:hover{background:#ffffff14;border-color:#ffffff40;transform:translate(4px);box-shadow:0 4px 15px #0003}.task-checkbox{appearance:none;border:2px solid var(--primary);cursor:pointer;background:0 0;border-radius:6px;width:20px;height:20px;transition:all .2s;position:relative}.task-checkbox:checked{background:var(--primary)}.task-checkbox:checked:after{content:"✓";color:#fff;font-size:14px;position:absolute;top:-1px;left:3px}@media (width<=850px){body{overflow:auto}.app-container{height:auto;min-height:100vh;display:block}.canvas-container{z-index:0;width:100vw;height:100vh;position:fixed;top:0;left:0}.ui-layer{flex-direction:column;justify-content:flex-start;gap:1.5rem;height:auto;padding:1.5rem 1rem;position:relative;overflow-y:visible}.panel-left,.panel-right{width:100%}.panel-right{order:-1}}