.app-header{padding:1rem 2rem;background-color:var(--header-bg);color:var(--header-text);box-shadow:0 2px 5px #0000001a;position:sticky;top:0;z-index:100;border-bottom:1px solid var(--border-color);transition:background-color .3s ease,color .3s ease,border-color .3s ease}.header-content{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}.title-credits{text-align:left}.app-header h1{margin:0 0 .1rem;font-size:1.8rem;font-weight:600;line-height:1.2}.creator-credit{margin:0;font-size:.8rem;opacity:.8}.theme-toggle-button{padding:.5rem 1rem;font-size:.9rem;cursor:pointer;border:1px solid var(--button-border);background-color:var(--button-bg);color:var(--button-text);border-radius:20px;transition:background-color .3s ease,color .3s ease,border-color .3s ease,box-shadow .2s ease;display:flex;align-items:center;gap:.5rem}.theme-toggle-button:hover{background-color:var(--button-hover-bg);border-color:var(--button-hover-border);box-shadow:0 2px 4px #0000001a}.theme-toggle-button .toggle-text{display:inline}@media (max-width: 600px){.app-header{padding:.8rem 1rem}.header-content{flex-direction:column;align-items:center;text-align:center}.title-credits{text-align:center;margin-bottom:.5rem}.app-header h1{font-size:1.5rem}.theme-toggle-button{padding:.4rem .8rem}}.app-footer{padding:1.5rem 2rem;background-color:var(--footer-bg);color:var(--footer-text);text-align:center;margin-top:auto;border-top:1px solid var(--border-color);font-size:.9rem;transition:background-color .3s ease,color .3s ease,border-color .3s ease;flex-shrink:0}.social-links{margin-bottom:.8rem}.social-links a{color:var(--footer-link-color);margin:0 .8rem;font-size:1.8rem;transition:color .3s ease,transform .2s ease;display:inline-block}.social-links a:hover{color:var(--footer-link-hover-color);transform:scale(1.1)}.connect-text{margin:.4rem 0;opacity:.8}.footer-credit{margin-top:.8rem;font-size:.8rem;opacity:.7}@media (max-width: 600px){.app-footer{padding:1rem;font-size:.85rem}.social-links a{font-size:1.6rem;margin:0 .6rem}}.sticky-note{color:var(--note-text);padding:.5rem;border-radius:8px;box-shadow:0 4px 10px #00000026;width:220px;height:200px;position:absolute;display:flex;flex-direction:column;border:1px solid var(--note-border);transition:color .3s ease,border-color .3s ease,box-shadow .2s ease,transform .2s ease;overflow:hidden;cursor:grab;-webkit-user-select:none;user-select:none}.sticky-note:active,.sticky-note:focus-within{cursor:grabbing;box-shadow:0 6px 15px #00000040;z-index:10;border-color:var(--note-border-light)}.sticky-note-header{display:flex;justify-content:flex-end;align-items:center;padding:.2rem .3rem;min-height:25px;cursor:grab;flex-shrink:0}.delete-note-button{background:none;border:none;color:var(--delete-button-color);cursor:pointer;font-size:1.1rem;padding:.5rem;line-height:1;opacity:.6;transition:opacity .2s ease,color .2s ease,background-color .2s ease,transform .1s ease;border-radius:50%;margin-left:auto;-webkit-user-select:none;user-select:none;z-index:1}.sticky-note:hover .delete-note-button,.sticky-note:focus-within .delete-note-button{opacity:.8}.delete-note-button:hover{opacity:1;color:var(--delete-button-hover-color);background-color:#0000001a;transform:scale(1.1)}.delete-note-button:active{background-color:#0003;transform:scale(.95)}.sticky-note-textarea{flex-grow:1;background-color:transparent;color:var(--note-text);border:none;padding:.5rem;font-family:inherit;font-size:.95rem;line-height:1.4;resize:none;outline:none;width:100%;box-sizing:border-box;cursor:text;-webkit-user-select:text;user-select:text;overflow-y:auto}.sticky-note-textarea::placeholder{color:var(--placeholder-text);opacity:.8;font-style:italic}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;min-height:100vh;display:flex;flex-direction:column;background-color:var(--bg-color);color:var(--text-color);transition:background-color .3s ease,color .3s ease;overflow-x:hidden}.app-container{display:flex;flex-direction:column;min-height:100vh;width:100%}.notes-area{flex-grow:1;padding:2rem;position:relative;min-height:500px;width:100%;overflow:auto;box-sizing:border-box}.add-note-button{padding:.8rem 1.5rem;font-size:1rem;font-weight:500;cursor:pointer;border:none;background-color:var(--add-button-bg);color:var(--add-button-text);border-radius:25px;box-shadow:0 2px 5px #0000001a;transition:background-color .3s ease,transform .2s ease,box-shadow .2s ease;position:fixed;bottom:70px;right:30px;z-index:50}.add-note-button:hover{background-color:var(--add-button-hover-bg);transform:scale(1.05);box-shadow:0 4px 8px #00000026}.add-note-button:active{transform:scale(.98)}@media (max-width: 768px){.notes-area{padding:1.5rem}.add-note-button{padding:.7rem 1.2rem;font-size:.9rem;bottom:60px;right:20px}}@media (max-width: 480px){.notes-area{padding:1rem;min-height:400px}.add-note-button{padding:.6rem 1rem;font-size:.85rem;bottom:50px;right:15px}}:root{--bg-color: #ffffff;--text-color: #212529;--header-bg: #f8f9fa;--header-text: #343a40;--footer-bg: #f1f3f5;--footer-text: #495057;--footer-link-color: #007bff;--footer-link-hover-color: #0056b3;--note-text: #55503a;--note-border: #e0e0e0;--note-border-light: #d1d1d1;--delete-button-color: #dc3545;--delete-button-hover-color: #a71d2a;--button-bg: #007bff;--button-text: #ffffff;--button-border: #007bff;--button-hover-bg: #0056b3;--button-hover-border: #0056b3;--add-button-bg: #28a745;--add-button-text: #ffffff;--add-button-hover-bg: #218838;--placeholder-text: #6c757d;--border-color: #dee2e6}body.dark{--bg-color: #1a1a1a;--text-color: #e0e0e0;--header-bg: #2c2c2c;--header-text: #f1f1f1;--footer-bg: #252525;--footer-text: #b0b0b0;--footer-link-color: #61dafb;--footer-link-hover-color: #8aefff;--note-text: #313131;--note-border: #555555;--note-border-light: #666666;--delete-button-color: #ff6b6b;--delete-button-hover-color: #ff4d4d;--button-bg: #61dafb;--button-text: #1a1a1a;--button-border: #61dafb;--button-hover-bg: #8aefff;--button-hover-border: #8aefff;--add-button-bg: #34c759;--add-button-text: #ffffff;--add-button-hover-bg: #2aa34a;--placeholder-text: #8a8a8a;--border-color: #444444}*,*:before,*:after{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;line-height:1.6;min-height:100vh;background-color:var(--bg-color);color:var(--text-color);transition:background-color .3s ease,color .3s ease;display:flex;flex-direction:column;overflow-x:hidden}#root{min-height:100vh;display:flex;flex-direction:column;width:100%}