@import url(https://fonts.googleapis.com/css2?family=Lexend:wght@400;700&display=swap);:root{--dark-grey:#2c2c2c;--light-grey:#3a3a3a;--black:#000;--white:#fff;--header-font-size:20px;--transition-duration:0.3s;--primary-color:#ff6b35;--secondary-color:#ffe5db;--accent-color:#ff5722;--box-shadow:4px 4px 0 0 #000;--hover-box-shadow:6px 6px 0 0 #000;--border-radius:12px;--font-family:"Lexend",sans-serif;--bg-color:#1a1a1a;--card-bg:#2a2a2a;--text-color:#e0e0e0;--border-color:#000;--secondary-text:#a0a0a0}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-color);color:var(--text-color);font-family:var(--font-family);line-height:1.6}.container,body{display:flex;flex-direction:column;min-height:100vh}.container{margin:0 auto;max-width:100%;padding:0 10px;width:100%}.header{border-bottom:1px solid var(--border-color);justify-content:space-between;margin-bottom:20px;padding:10px 0}.header,.logo-container{align-items:center;display:flex}.logo-container{gap:10px}.logo{border-radius:8px;height:32px;width:32px}.app-title{color:var(--primary-color);font-size:28px;font-weight:700;letter-spacing:-.02em}.header-actions{display:flex;gap:10px}.tab-navigation{border-bottom:2px solid var(--border-color);display:flex;margin-bottom:20px;width:100%}.tab-btn{background:transparent;border:none;color:var(--secondary-text);cursor:pointer;flex:1;font-family:var(--font-family);font-size:16px;font-weight:700;padding:15px 20px;position:relative;text-align:center;transition:all .2s ease}.tab-btn:hover{color:var(--text-color)}.tab-btn.active{color:var(--primary-color)}.tab-btn.active:after{background:var(--primary-color);bottom:-2px;content:"";height:2px;left:0;position:absolute;width:100%}.tab-content{display:none;flex:1}.clock-display,.tab-content.active{display:flex;flex-direction:column}.clock-display{align-items:center;flex:1;justify-content:center;padding:40px 20px}.time-display{color:var(--primary-color);font-size:200px;font-weight:700;letter-spacing:-2px;margin-bottom:20px;text-shadow:2px 2px 0 rgba(0,0,0,.3)}.date-display{color:var(--secondary-text);font-size:50px;text-align:center}.alarm-container{gap:20px;padding:20px}.alarm-container,.alarm-list{display:flex;flex-direction:column}.alarm-list{gap:15px}.alarm-item{align-items:center;background:var(--card-bg);border:2px solid var(--border-color);border-radius:var(--border-radius);box-shadow:var(--box-shadow);display:flex;justify-content:space-between;padding:20px;transition:all .2s ease}.alarm-item:hover{border-color:var(--primary-color);box-shadow:var(--hover-box-shadow)}.alarm-time{color:var(--primary-color);font-size:32px;font-weight:700}.alarm-details{display:flex;flex-direction:column;gap:5px}.alarm-label{color:var(--text-color);font-size:18px}.alarm-repeat{color:var(--secondary-text);font-size:14px}.alarm-toggle{align-items:center;display:flex;gap:10px}.stopwatch-container{align-items:center;display:flex;flex:1;flex-direction:column;justify-content:center;padding:40px 20px}.stopwatch-display{color:var(--primary-color);font-family:Courier New,monospace;font-size:200px;font-weight:700;letter-spacing:-2px;margin-bottom:30px;text-shadow:2px 2px 0 rgba(0,0,0,.3)}.stopwatch-controls{display:flex;gap:15px;margin-bottom:30px}.lap-times{background:var(--card-bg);border:2px solid var(--border-color);border-radius:var(--border-radius);max-height:300px;max-width:400px;overflow-y:auto;padding:15px;width:100%}.lap-time{border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;padding:8px 0}.lap-time:last-child{border-bottom:none}.lap-number{color:var(--secondary-text)}.lap-value{color:var(--text-color);font-family:Courier New,monospace;font-weight:700}.settings-container{display:flex;flex-direction:column;gap:30px;padding:20px}.setting-group{background:var(--card-bg);border:2px solid var(--border-color);border-radius:var(--border-radius);box-shadow:var(--box-shadow);padding:20px}.setting-group h3{border-bottom:1px solid var(--border-color);color:var(--primary-color);font-size:20px;margin-bottom:20px;padding-bottom:10px}.setting-item{align-items:center;display:flex;justify-content:space-between;margin-bottom:15px;padding:10px 0}.setting-item:last-child{margin-bottom:0}.setting-item label{color:var(--text-color);font-weight:500}input[type=range]{-webkit-appearance:none;background:var(--light-grey);border-radius:3px;height:6px;outline:none;width:120px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--primary-color);border-radius:50%;cursor:pointer;height:18px;width:18px}input[type=range]::-moz-range-thumb{background:var(--primary-color);border:none;border-radius:50%;cursor:pointer;height:18px;width:18px}#volume-value{color:var(--primary-color);display:inline-block;font-weight:700;margin-left:10px;text-align:center;width:40px}.toggle-switch{display:inline-block}.toggle-switch,.toggle-switch input{height:24px;position:relative;width:50px}.toggle-switch input{cursor:pointer;margin:0;opacity:0;z-index:2}.slider{background-color:var(--light-grey);border-radius:24px;bottom:0;cursor:pointer;left:0;pointer-events:none;right:0;top:0;z-index:1}.slider,.slider:before{position:absolute;transition:.3s}.slider:before{background-color:#fff;border-radius:50%;bottom:3px;content:"";height:18px;left:3px;width:18px}input:checked+.slider{background-color:var(--primary-color)}input:checked+.slider:before{transform:translateX(26px)}.modal{background-color:rgba(0,0,0,.7);display:none;height:100%;left:0;position:fixed;top:0;width:100%;z-index:1000}.modal-content{background-color:var(--card-bg);border:2px solid var(--border-color);border-radius:var(--border-radius);box-shadow:var(--hover-box-shadow);margin:10% auto;max-width:500px;padding:0;width:90%}.alarm-modal{animation:pulse 1s infinite}@keyframes pulse{0%{background-color:rgba(0,0,0,.7)}50%{background-color:rgba(255,107,53,.3)}to{background-color:rgba(0,0,0,.7)}}.alarm-modal-content{animation:shake .5s infinite;border:3px solid var(--primary-color)}@keyframes shake{0%{transform:translateX(0)}25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-5px)}to{transform:translateX(0)}}.alarm-info{padding:20px 0;text-align:center}.alarm-time-display{color:var(--primary-color);font-size:48px;font-weight:700;margin-bottom:10px}.alarm-label-display{color:var(--text-color);font-size:24px}.modal-header{align-items:center;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;padding:20px}.modal-header h3{color:var(--primary-color);font-size:20px}.close-btn{background:none;border:none;color:var(--secondary-text);cursor:pointer;font-size:28px;transition:color .2s}.close-btn:hover{color:var(--text-color)}.modal-body{padding:20px}.modal-footer{border-top:1px solid var(--border-color);display:flex;gap:10px;justify-content:flex-end;padding:20px}.time-picker{align-items:center;display:flex;gap:10px;justify-content:center;margin-bottom:20px}.time-picker input{background:var(--bg-color);border:2px solid var(--border-color);border-radius:var(--border-radius);color:var(--text-color);font-family:var(--font-family);font-size:36px;height:60px;text-align:center;width:80px}.time-picker input:focus{border-color:#ff8c00;box-shadow:0 0 0 2px rgba(255,140,0,.2);outline:none}.am-pm-selector{display:flex;flex-direction:column;margin-left:10px}.am-pm-btn{background:var(--card-bg);border:2px solid var(--border-color);border-radius:var(--border-radius);color:var(--text-color);cursor:pointer;font-family:var(--font-family);font-size:14px;font-weight:700;margin:2px 0;padding:5px 10px;transition:all .2s ease}.am-pm-btn.active,.am-pm-btn:hover{border-color:var(--primary-color)}.am-pm-btn.active{background:var(--primary-color);color:var(--black)}.time-picker input::-webkit-inner-spin-button,.time-picker input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.time-picker input[type=number]{-moz-appearance:textfield}.time-picker span{color:var(--primary-color);font-size:36px;font-weight:700}.alarm-label{margin-bottom:20px}.alarm-label input{background:var(--bg-color);border:2px solid var(--border-color);border-radius:var(--border-radius);color:var(--text-color);font-family:var(--font-family);padding:12px;width:100%}.alarm-label input:focus{border-color:#ff8c00;box-shadow:0 0 0 2px rgba(255,140,0,.2);outline:none}.alarm-repeat{margin-bottom:20px}.repeat-days{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}.day-btn{background:var(--bg-color);border:2px solid var(--border-color);border-radius:50%;color:var(--secondary-text);cursor:pointer;font-family:var(--font-family);font-weight:700;height:40px;transition:all .2s;width:40px}.day-btn:hover{color:var(--text-color)}.day-btn.active,.day-btn:hover{border-color:var(--primary-color)}.day-btn.active{background:var(--primary-color);color:var(--black)}.radio-group{display:flex;gap:20px}.radio-group label{align-items:center;cursor:pointer;display:flex;gap:8px}input[type=radio]{-webkit-appearance:none;appearance:none;background-color:var(--bg-color);border:2px solid var(--border-color);border-radius:50%;cursor:pointer;height:18px;position:relative;transition:all .2s ease;width:18px}input[type=radio]:checked{background-color:var(--primary-color);border-color:var(--primary-color)}input[type=radio]:checked:after{background-color:var(--black);border-radius:50%;content:"";height:8px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:8px}input[type=radio]:hover{border-color:var(--primary-color)}input[type=range]{width:150px}select{background:var(--bg-color);border:2px solid var(--border-color);border-radius:var(--border-radius);color:var(--text-color);font-family:var(--font-family);padding:8px 12px}.footer{border-top:1px solid var(--border-color);color:var(--secondary-text);font-size:14px;margin-top:auto;padding:5px 0;text-align:center}.footer a{color:var(--primary-color);text-decoration:none}.footer a:hover{text-decoration:underline}.btn-primary,.btn-secondary{align-items:center;background:var(--primary-color);border:2px solid var(--border-color);border-radius:var(--border-radius);color:var(--black);cursor:pointer;display:inline-flex;font-family:var(--font-family);font-size:14px;font-weight:700;gap:8px;justify-content:center;overflow:hidden;padding:12px 24px;position:relative;transition:all .2s ease}.btn-primary:hover,.btn-secondary:hover{background:var(--accent-color);box-shadow:var(--hover-box-shadow);transform:translateY(-2px)}.btn-primary:active,.btn-secondary:active{box-shadow:var(--box-shadow);transform:translateY(0)}.btn-secondary{background:var(--card-bg);color:var(--text-color)}@media (max-width:768px){.header{align-items:stretch;flex-direction:column;gap:15px}.header-actions{justify-content:center}.time-display{font-size:64px}.date-display{font-size:18px}.stopwatch-display{font-size:48px}.modal-content{margin:15% auto;width:100%}.time-picker input{font-size:28px;height:50px;width:60px}.time-picker span{font-size:28px}}@media (max-width:480px){.container{padding:0 15px}.app-title{font-size:24px}.tab-btn{font-size:14px;padding:12px 15px}.time-display{font-size:48px}.date-display{font-size:16px}.stopwatch-display{font-size:36px}.alarm-item{align-items:flex-start;flex-direction:column;gap:15px}.alarm-toggle{justify-content:space-between;width:100%}.setting-item{align-items:flex-start}.radio-group,.setting-item{flex-direction:column;gap:10px}.repeat-days{justify-content:center}}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-color)}::-webkit-scrollbar-thumb{background:var(--light-grey);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--dark-grey)}