:root{--gba-body: #2c2c3e;--gba-screen: #9bbc0f;--gba-screen-on: #e0f8cf;--gba-text: #0f380f;--btn-face: #eee;--btn-highlight: #fff;--btn-shadow: #888;--btn-dark: #333}*{box-sizing:border-box;font-family:"Press Start 2P",DotGothic16,monospace;-webkit-font-smoothing:none;margin:0;padding:0}body{background-color:var(--gba-body);display:flex;justify-content:center;align-items:center;min-height:100dvh;color:var(--gba-text);padding:10px;overscroll-behavior:none}#root{width:100%;display:flex;justify-content:center}.app-container{background-color:#ddd;padding:15px;border-radius:20px;box-shadow:inset 2px 2px 5px #ffffff80,inset -2px -2px 5px #0003,5px 5px 20px #00000080;display:flex;flex-direction:column;gap:15px;width:100%;max-width:400px;position:relative;overflow:visible;margin-top:40px}.utility-buttons{display:flex;justify-content:flex-end;gap:10px;position:absolute;top:-40px;right:0;width:100%}.util-btn{width:auto;padding:8px 12px;font-size:.7rem;background-color:#607d8b;color:#fff;border:2px solid #333;box-shadow:2px 2px #000}.util-btn:active{transform:translate(2px,2px);box-shadow:none}@media(min-width:600px){.app-container{flex-direction:row;align-items:stretch;gap:40px;max-width:900px;padding:30px;margin-top:0}.timer-display-area{flex:1;margin-bottom:0!important;display:flex;flex-direction:column}.screen-content{flex-grow:1;display:flex;flex-direction:column;justify-content:center}.control-area{width:320px;justify-content:center;flex-shrink:0;position:relative}.utility-buttons{position:absolute;top:-50px;right:0;width:auto}.footer-area{flex-direction:row!important;justify-content:space-between;text-align:left!important;margin-top:auto}}.timer-display-area{background-color:#555;padding:10px 10px 30px;border-radius:10px 10px 40px;box-shadow:inset 2px 2px 5px #00000080}.screen-content{background-color:var(--gba-screen-on);color:var(--gba-text);padding:15px;border:4px solid #333;box-shadow:inset 4px 4px 4px #0003;background-image:linear-gradient(transparent 50%,#0f380f1a 50%),linear-gradient(90deg,transparent 50%,rgba(15,56,15,.1) 50%);background-size:4px 4px}.status-header{display:flex;flex-direction:column;align-items:center;border-bottom:2px dashed var(--gba-text);padding-bottom:10px;margin-bottom:20px;gap:5px}.app-name{font-size:.7rem}.status-text{font-size:1.2rem;font-weight:700}.status-text.work{color:#d32f2f}.status-text.break{color:#2e7d32}.timer-display{font-size:2.5rem;text-align:center;letter-spacing:2px}button,.download-btn{font-size:.9rem;cursor:pointer;background-color:var(--btn-face);color:#333;border:none;box-shadow:inset 2px 2px 0 var(--btn-highlight),inset -2px -2px 0 var(--btn-shadow),3px 3px 0 var(--btn-dark);padding:15px;position:relative;text-transform:uppercase;width:100%;text-decoration:none;display:block;box-sizing:border-box}button:active,.download-btn:active{transform:translate(3px,3px);box-shadow:inset 2px 2px 0 var(--btn-shadow),inset -2px -2px 0 var(--btn-face)}.control-area{display:flex;flex-direction:column;gap:15px}.main-controls{display:flex;flex-direction:column;gap:10px;margin-bottom:10px}.start-stop{background-color:#6a5acd;color:#fff;box-shadow:inset 2px 2px #8e7ed8,inset -2px -2px #483d8b,3px 3px #222}.start-stop.running{background-color:#cd5c5c;box-shadow:inset 2px 2px #e9967a,inset -2px -2px #8b0000,3px 3px #222}.switch-mode{background-color:#3cb371;color:#fff;box-shadow:inset 2px 2px #66cdaa,inset -2px -2px #2e8b57,3px 3px #222}.download-btn{background-color:#4caf50;color:#fff;box-shadow:inset 2px 2px #81c784,inset -2px -2px #388e3c,3px 3px #222;margin-bottom:0}.web-btn{background-color:#8bc34a!important;color:#1b5e20!important;box-shadow:inset 2px 2px #c5e1a5,inset -2px -2px #558b2f,3px 3px #222!important}.settings-group{background-color:#ccc;padding:10px 12px;border:2px solid #888;display:flex;align-items:center;justify-content:space-between;font-size:.75rem;box-shadow:inset 2px 2px #fff,inset -2px -2px #999;width:100%;height:50px}.settings-group button{width:auto;padding:5px 15px;font-size:.75rem;margin:0;background-color:#fff;color:#000;border:2px solid #555;box-shadow:2px 2px #000;flex-shrink:0}.settings-group button:active{transform:translate(2px,2px);box-shadow:none;background-color:#ddd}.input-group.disabled{opacity:.5;pointer-events:none}.input-label{font-size:.75rem;white-space:nowrap}.input-wrapper{display:flex;align-items:center;gap:5px}.unit{font-size:.75rem}.add-btn{width:auto;padding:5px 10px;font-size:.75rem;margin:0;background-color:#fff;color:#000;border:2px solid #555;box-shadow:2px 2px #000}.add-btn:active{transform:translate(2px,2px);box-shadow:none;background-color:#ddd}input[type=number]{width:50px;max-width:50px;font-family:DotGothic16,monospace;background-color:var(--gba-screen-on);border:2px solid #555;padding:5px;font-size:.9rem;text-align:right;color:var(--gba-text)}.footer-area{display:flex;flex-direction:column;align-items:center;gap:5px;margin-top:10px;opacity:.7;text-align:center;width:100%}.visitor-counter{font-size:.6rem;color:#555;font-family:"Press Start 2P",monospace}.copyright{font-size:.5rem;color:#555}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000c;display:flex;justify-content:center;align-items:center;z-index:2000}.modal-content{background-color:#fff;border:4px solid #333;padding:20px;width:85%;max-width:400px;box-shadow:8px 8px #00000080;font-family:DotGothic16,monospace;max-height:80vh;display:flex;flex-direction:column}.history-list{flex-grow:1;overflow-y:auto;margin:10px 0;border:2px solid #ccc;padding:5px;background:#f9f9f9;max-height:300px}.close-btn{margin-top:10px;background-color:#d32f2f;color:#fff;box-shadow:inset 2px 2px #ff7f7f,inset -2px -2px #8b0000,2px 2px #000;width:100%}