.app-header{text-align:center;padding:1.5rem 1rem;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.05) 2px,rgba(0,0,0,.05) 4px),repeating-linear-gradient(90deg,transparent,transparent 2px,rgba(0,0,0,.05) 2px,rgba(0,0,0,.05) 4px),linear-gradient(135deg,#b71c1c,#dc143c,#e53935,#dc143c,#b71c1c);border-bottom:6px solid var(--color-gold);box-shadow:0 8px 16px #dc143c66,0 4px 8px #0000004d,inset 0 1px #ffffff1a,inset 0 -1px #0006;margin-bottom:3rem;position:relative;overflow:hidden}.app-header:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse at center,#0006,#0000004d,#00000080),radial-gradient(ellipse at top,rgba(0,0,0,.2) 0%,transparent 60%),radial-gradient(ellipse at bottom,rgba(0,0,0,.2) 0%,transparent 60%);pointer-events:none;z-index:1}.app-header:after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(218,165,32,.5),rgba(218,165,32,.8),rgba(218,165,32,.5),transparent)}.app-title{font-family:var(--font-heading);font-size:3rem;color:#fff;margin:0 0 .5rem;text-transform:uppercase;letter-spacing:.2em;text-shadow:2px 2px 0px rgba(0,0,0,.6),4px 4px 8px rgba(0,0,0,.7),0 0 20px rgba(255,255,255,.15),0 0 40px rgba(255,107,53,.2);position:relative;z-index:2;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}.app-subtitle{font-family:var(--font-body);font-size:1rem;color:#ffe5cc;margin:0;font-weight:500;letter-spacing:.15em;text-shadow:1px 1px 2px rgba(0,0,0,.6),0 0 8px rgba(255,140,66,.25);position:relative;z-index:2;opacity:.9}@media (max-width: 768px){.app-header{padding:1.25rem 1rem}.app-title{font-size:2rem;letter-spacing:.15em}.app-subtitle{font-size:.875rem}}.app-container{max-width:1400px;margin:0 auto;padding:0 2rem;position:relative;z-index:1}@media (max-width: 768px){.app-container{padding:0 1rem}}.app-footer{text-align:center;padding:2rem 1rem;margin-top:auto;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.03) 2px,rgba(0,0,0,.03) 4px),repeating-linear-gradient(90deg,transparent,transparent 2px,rgba(0,0,0,.03) 2px,rgba(0,0,0,.03) 4px),linear-gradient(135deg,#2f1f12,#3d2817,#2f1f12);border-top:3px solid var(--color-gold);box-shadow:0 -4px 8px #0000004d,inset 0 1px #ffffff0d;position:relative}.app-footer:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse at center,#0003,#0000001a,#0003);pointer-events:none;z-index:0}.footer-text{font-family:var(--font-body);font-size:.875rem;color:#c9b896;margin:0;letter-spacing:.1em;text-shadow:1px 1px 2px rgba(0,0,0,.7);position:relative;z-index:1;opacity:.85}@media (max-width: 768px){.app-footer{padding:1.5rem 1rem}.footer-text{font-size:.75rem}}.timer-display{text-align:center;margin-bottom:2rem;position:relative;z-index:1;padding:1.5rem;background:repeating-linear-gradient(0deg,transparent,transparent 1px,rgba(0,0,0,.1) 1px,rgba(0,0,0,.1) 2px),radial-gradient(circle at center,#372d23d9,#282019e6);border-radius:var(--border-radius);border:2px solid rgba(139,111,71,.5);box-shadow:inset 0 2px 8px #0006,inset 0 -1px 4px #0000004d,0 2px 8px #0000004d}.timer-time{font-size:4.5rem;font-weight:700;font-family:var(--font-heading);color:var(--color-primary);line-height:1;margin-bottom:.75rem;text-shadow:1px 1px 0px rgba(255,255,255,.5),2px 2px 6px rgba(0,0,0,.5),0 0 25px rgba(220,20,60,.3);letter-spacing:.05em}.timer-status{font-size:1.125rem;font-weight:600;color:#e8dcc6;text-transform:uppercase;letter-spacing:.15em;text-shadow:1px 1px 3px rgba(0,0,0,.9),0 0 8px rgba(0,0,0,.5)}.timer-display.running .timer-time{color:var(--color-primary);text-shadow:1px 1px 0px rgba(255,255,255,.4),2px 2px 6px rgba(0,0,0,.5),0 0 30px rgba(220,20,60,.5),0 0 50px rgba(255,107,53,.3);animation:pulse-red 2s ease-in-out infinite}@keyframes pulse-red{0%,to{opacity:1}50%{opacity:.9;text-shadow:1px 1px 0px rgba(255,255,255,.4),2px 2px 6px rgba(0,0,0,.5),0 0 40px rgba(220,20,60,.6),0 0 60px rgba(255,107,53,.4)}}.timer-display.paused .timer-time{color:var(--color-orange);text-shadow:1px 1px 0px rgba(255,255,255,.4),2px 2px 4px rgba(0,0,0,.4),0 0 20px rgba(255,140,66,.3)}.timer-display.complete .timer-time{color:var(--color-green);text-shadow:1px 1px 0px rgba(255,255,255,.4),2px 2px 4px rgba(0,0,0,.4),0 0 30px rgba(85,107,47,.4);animation:pulse 1.5s ease-in-out infinite}.timer-display.complete{background:repeating-linear-gradient(0deg,transparent,transparent 1px,rgba(0,0,0,.15) 1px,rgba(0,0,0,.15) 2px),radial-gradient(circle at center,#4a5d2366,#282019e6);border-color:#5d6b3f99;box-shadow:inset 0 2px 8px #0006,inset 0 -1px 4px #0000004d,0 2px 8px #5d6b3f4d,0 0 20px #5d6b3f33}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.9;transform:scale(1.02)}}@media (max-width: 768px){.timer-time{font-size:3.5rem}.timer-display{padding:1rem}}.timer-controls{display:flex;gap:.75rem;justify-content:center;flex-wrap:nowrap;margin-top:1.5rem;position:relative;z-index:1}.btn{padding:.75rem 1.5rem;font-size:.875rem;font-weight:600;font-family:var(--font-body);border:3px solid;border-radius:var(--border-radius);cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);text-transform:uppercase;letter-spacing:.1em;box-shadow:var(--shadow),inset 0 1px #ffffff4d,inset 0 -1px #0003;position:relative;overflow:hidden;white-space:nowrap}.btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s ease}.btn:hover:before{left:100%}.btn:hover{transform:translateY(-3px);box-shadow:0 8px 16px #00000040,inset 0 1px #fff6,inset 0 -1px #0003}.btn:active{transform:translateY(-1px);box-shadow:0 4px 8px #0003,inset 0 1px #fff3,inset 0 -1px #0000004d}.btn-primary{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);border-color:var(--color-dark);color:#fff;box-shadow:var(--shadow),inset 0 1px #ffffff4d,inset 0 -1px #0003,0 0 15px #dc143c4d}.btn-primary:hover{background:linear-gradient(135deg,var(--color-primary-light) 0%,var(--color-primary) 100%);box-shadow:0 8px 16px #00000040,inset 0 1px #fff6,inset 0 -1px #0003,0 0 25px #dc143c80}.btn-secondary{background:linear-gradient(135deg,var(--color-orange) 0%,var(--color-secondary) 100%);border-color:var(--color-dark);color:#fff;box-shadow:var(--shadow),inset 0 1px #ffffff4d,inset 0 -1px #0003,0 0 10px #ff6b3533}.btn-secondary:hover{background:linear-gradient(135deg,var(--color-secondary) 0%,var(--color-orange) 100%);box-shadow:0 8px 16px #00000040,inset 0 1px #fff6,inset 0 -1px #0003,0 0 20px #ff8c4266}.btn-danger{background:linear-gradient(135deg,var(--color-primary-dark) 0%,var(--color-primary) 100%);border-color:var(--color-dark);color:#fff;box-shadow:var(--shadow),inset 0 1px #fff3,inset 0 -1px #0000004d,0 0 10px #b71c1c4d}.btn-danger:hover{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);box-shadow:0 8px 16px #00000040,inset 0 1px #ffffff4d,inset 0 -1px #0000004d,0 0 20px #b71c1c80}@media (max-width: 768px){.btn{padding:.625rem 1rem;font-size:.75rem}.timer-controls{gap:.5rem}}.progress-indicator{margin:2rem 0;position:relative;z-index:1}.progress-bar{width:100%;height:16px;background:repeating-linear-gradient(0deg,transparent,transparent 1px,rgba(0,0,0,.2) 1px,rgba(0,0,0,.2) 2px),linear-gradient(135deg,#2f2418,#251c14);border-radius:8px;overflow:hidden;border:3px solid var(--color-dark);box-shadow:inset 0 2px 6px #00000080,inset 0 -1px 3px #0006,0 2px 4px #0000004d;position:relative}.progress-bar:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(180deg,rgba(255,255,255,.3) 0%,transparent 50%,rgba(0,0,0,.1) 100%);pointer-events:none}.progress-fill{height:100%;background:linear-gradient(90deg,var(--color-primary) 0%,var(--color-primary-light) 50%,var(--color-primary) 100%);background-size:200% 100%;transition:width .1s linear;border-radius:5px;position:relative;box-shadow:inset 0 1px #ffffff4d,inset 0 -1px #0000004d,0 0 8px #dc143c33}.progress-fill.running{background:linear-gradient(90deg,var(--color-primary) 0%,var(--color-orange) 50%,var(--color-primary) 100%);background-size:200% 100%;animation:shimmer 3s ease-in-out infinite;box-shadow:inset 0 1px #ffffff59,inset 0 -1px #0000004d,0 0 12px #dc143c66,0 0 20px #ff6b3533}.progress-fill.paused{background:linear-gradient(90deg,var(--color-orange) 0%,var(--color-secondary) 50%,var(--color-orange) 100%);background-size:200% 100%;opacity:.8}.progress-fill.complete{background:linear-gradient(90deg,var(--color-green) 0%,#6B7A3F 50%,var(--color-green) 100%);background-size:200% 100%;animation:complete-pulse 1.5s ease-in-out infinite,shimmer 2s ease-in-out infinite;box-shadow:inset 0 1px #ffffff59,inset 0 -1px #00000040,0 0 15px #4a5d2366,0 0 25px #4a5d2333}.progress-fill.idle{background:var(--color-tan);opacity:.5}@keyframes shimmer{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes complete-pulse{0%,to{opacity:1;box-shadow:inset 0 1px #ffffff80,inset 0 -1px #0003,0 0 15px #556b2f66}50%{opacity:.9;box-shadow:inset 0 1px #ffffff80,inset 0 -1px #0003,0 0 20px #556b2f99}}.progress-label{text-align:center;font-size:.875rem;color:#e8dcc6;margin-top:.5rem;font-weight:500;text-shadow:1px 1px 3px rgba(0,0,0,.9),0 0 6px rgba(0,0,0,.5)}.timer-card{background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.05) 2px,rgba(0,0,0,.05) 4px),repeating-linear-gradient(90deg,transparent,transparent 2px,rgba(0,0,0,.05) 2px,rgba(0,0,0,.05) 4px),radial-gradient(ellipse at 20% 30%,rgba(0,0,0,.15) 0%,transparent 45%),radial-gradient(ellipse at 80% 70%,rgba(0,0,0,.12) 0%,transparent 45%),linear-gradient(135deg,#45382a,#3d2f1f,#352a1e,#3d2f1f,#45382a);border:4px solid var(--color-dark);border-radius:var(--border-radius);padding:2.5rem;box-shadow:0 12px 32px #000000b3,0 4px 12px #00000080,inset 0 1px #ffffff1a,inset 0 -1px #0006,inset 2px 2px 8px #0000004d;position:relative;overflow:hidden;-webkit-backdrop-filter:blur(.5px);backdrop-filter:blur(.5px)}.timer-card:before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:linear-gradient(90deg,transparent,var(--color-primary) 10%,var(--color-orange) 50%,var(--color-primary) 90%,transparent);box-shadow:0 2px 8px #dc143c80,0 0 15px #ff6b354d}.timer-card:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 25% 35%,rgba(139,111,71,.04) 0%,transparent 45%),radial-gradient(circle at 75% 65%,rgba(107,68,35,.03) 0%,transparent 45%),repeating-linear-gradient(45deg,transparent,transparent 12px,rgba(107,68,35,.01) 12px,rgba(107,68,35,.01) 24px);pointer-events:none;z-index:0}.timer-header{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:3px solid rgba(139,111,71,.4);position:relative;z-index:1;box-shadow:0 2px 4px #0003;min-height:60px}.timer-header:after{content:"";position:absolute;bottom:-3px;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,rgba(139,69,19,.3),transparent)}.timer-icon{font-size:2.5rem;line-height:1;filter:drop-shadow(2px 2px 4px rgba(0,0,0,.6)) drop-shadow(0 0 8px rgba(0,0,0,.4)) brightness(1.1);position:relative;z-index:1;flex-shrink:0;width:48px;text-align:center}.timer-title{font-family:var(--font-heading);font-size:2rem;color:var(--color-primary);margin:0;text-transform:uppercase;letter-spacing:.15em;text-shadow:1px 1px 0px rgba(255,255,255,.5),2px 2px 4px rgba(0,0,0,.4),0 0 15px rgba(220,20,60,.2);position:relative;z-index:1;white-space:nowrap;line-height:1.2;flex-shrink:0}@media (max-width: 968px){.timer-card{padding:2rem}}@media (max-width: 768px){.timer-card{padding:1.5rem}.timer-title{font-size:1.5rem}.timer-icon{font-size:2rem;width:40px}.timer-header{min-height:50px;gap:.5rem}}.timers-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;margin-bottom:3rem;max-width:1600px;width:100%}@media (max-width: 1400px){.timers-grid{grid-template-columns:repeat(2,1fr);gap:2rem}}@media (max-width: 768px){.timers-grid{grid-template-columns:1fr;gap:2rem}}:root{--color-primary: #DC143C;--color-primary-dark: #B71C1C;--color-primary-light: #E53935;--color-secondary: #FF6B35;--color-orange: #FF8C42;--color-dark: #1A1A1A;--color-dark-brown: #2C1810;--color-tan: #E8DCC6;--color-gold: #D4AF37;--color-green: #4A5D23;--color-charcoal: #2C1810;--color-parchment: #F4E8D1;--color-parchment-light: #FAF5E8;--color-parchment-dark: #E6D5B8;--color-sepia: #8B6F47;--color-silver: #C0C0C0;--font-heading: "Bebas Neue", sans-serif;--font-body: "Inter", sans-serif;--border-radius: 12px;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .1);--shadow: 0 4px 12px rgba(0, 0, 0, .15);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .2), 0 2px 8px rgba(0, 0, 0, .1);--shadow-xl: 0 12px 32px rgba(0, 0, 0, .25), 0 4px 12px rgba(0, 0, 0, .15)}*{box-sizing:border-box;margin:0;padding:0}body{margin:0;font-family:var(--font-body);background:url(/images/western-leather-bg.png),#1a1a1a;background-attachment:fixed;background-size:cover;background-position:center;background-repeat:no-repeat;min-height:100vh;color:#e8dcc6;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:relative}body:before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;background:linear-gradient(to bottom,#00000080,#0006,#00000080);pointer-events:none;z-index:0}#root{min-height:100vh;position:relative;z-index:1}.app{min-height:100vh;display:flex;flex-direction:column;position:relative}::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:#0000004d}::-webkit-scrollbar-thumb{background:var(--color-primary);border-radius:6px}::-webkit-scrollbar-thumb:hover{background:var(--color-secondary)}button:focus-visible,a:focus-visible{outline:3px solid var(--color-gold);outline-offset:2px}button{font-family:inherit}