*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:#f8f9fa;min-height:100vh;color:#333;line-height:1.6}.whiteboard-container{min-height:100vh;display:flex;flex-direction:column;padding:0;margin:0}.whiteboard-header{background:white;padding:1rem 2rem;box-shadow:0 2px 4px #0000001a;display:flex;align-items:center;gap:2rem;flex-wrap:wrap;position:relative}.app-title{font-size:1.5rem;color:#2c3e50;font-weight:600;margin:0}.new-note-button{background:#FFD700;border:none;padding:.75rem 1.5rem;border-radius:6px;font-size:1rem;font-weight:600;color:#333;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 4px #0000001a}.new-note-button:hover{background:#FFC107;transform:translateY(-1px);box-shadow:0 3px 6px #00000026}.new-note-button:active{transform:translateY(0);box-shadow:0 1px 2px #0000001a}.new-note-button:disabled,.new-note-button.disabled,.new-note-sticky.disabled{background:#ddd!important;color:#999;cursor:not-allowed;transform:none;box-shadow:none}.new-note-sticky.disabled .plus-icon,.new-note-sticky.disabled .new-note-label{color:#999}.cache-status{font-size:.9rem;padding:.5rem 1rem;border-radius:4px;font-weight:500;margin-left:auto}.cache-status.available{background:#d4edda;color:#155724;border:1px solid #c3e6cb}.cache-status.unavailable{background:#f8d7da;color:#721c24;border:1px solid #f5c6cb}.instruction-note{background:#e3f2fd!important;border:2px solid #2196f3!important;cursor:default!important}.instruction-note:hover{transform:none!important;box-shadow:0 3px 8px #00000026!important}.instruction-note .note-text{color:#1976d2;font-weight:500;font-size:.9rem}.whiteboard{flex:1;position:relative;margin:1rem;background:white;border-radius:8px;box-shadow:0 4px 12px #0000001a;min-height:calc(100vh - 120px);overflow-y:auto;overflow-x:hidden;padding:1rem;width:calc(100% - 2rem)}.new-note-sticky{background:#FFD700!important;border:2px dashed #FFC107!important;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:all .2s ease}.new-note-sticky:hover{background:#FFC107!important;transform:translateY(-2px);box-shadow:0 6px 12px #0003}.new-note-sticky .plus-icon{font-size:3rem;font-weight:700;color:#333;line-height:1;margin-bottom:.5rem}.new-note-sticky .new-note-label{font-size:.8rem;color:#666;font-weight:500;text-align:center}.sticky-note{position:absolute;width:200px;min-height:150px;background:#ffffff;border:1px solid #e0e0e0;border-radius:8px;padding:16px;box-shadow:0 4px 6px #0000001a;cursor:default;transition:all .2s ease;font-family:inherit}.sticky-note:hover{transform:translateY(-2px);box-shadow:0 5px 15px #0003}.sticky-note.editing{border:2px solid #FF6B35;background:#FFF3CD;z-index:100}.note-textarea{width:100%;height:100px;border:none;background:transparent;resize:none;font-family:inherit;font-size:.9rem;line-height:1.4;outline:none;color:#333}.note-textarea::placeholder{color:#666;font-style:italic}.char-count{text-align:right;font-size:.8rem;color:#666;margin-top:.5rem;font-weight:500}.char-count.warning{color:#dc3545;font-weight:600}.note-text{font-size:.9rem;line-height:1.4;color:#333;white-space:pre-wrap;word-wrap:break-word;margin-bottom:.5rem}.note-timestamp{font-size:.7rem;color:#666;text-align:right;font-style:italic;border-top:1px solid #E0E0E0;padding-top:.5rem;margin-top:.5rem}.message{position:absolute;top:100%;left:0;right:0;padding:.75rem 1rem;border-radius:4px;font-weight:500;z-index:1000;animation:slideDown .3s ease}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.message-info{background:#cce7ff;color:#06c;border:1px solid #99d6ff}.error-message{background:#f8d7da;color:#721c24;border:1px solid #f5c6cb;padding:.5rem;border-radius:4px;font-size:.8rem;margin-top:.5rem;text-align:center}.global-error{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;z-index:10000}.error-content{background:white;padding:2rem;border-radius:8px;max-width:400px;text-align:center;box-shadow:0 10px 30px #0000004d}.error-content h2{color:#dc3545;margin-bottom:1rem}.error-content button{background:#007bff;color:#fff;border:none;padding:.75rem 1.5rem;border-radius:4px;cursor:pointer;margin-top:1rem;font-size:1rem}.error-content button:hover{background:#0056b3}#fallback-app{max-width:600px;margin:2rem auto;padding:2rem;background:white;border-radius:8px;box-shadow:0 4px 12px #0000001a}.fallback-message h2{color:#dc3545;margin-bottom:1rem}.fallback-message ul{background:#f8f9fa;padding:1rem;border-radius:4px;margin:1rem 0}.fallback-message button{background:#007bff;color:#fff;border:none;padding:.75rem 1.5rem;border-radius:4px;cursor:pointer;font-size:1rem;margin-top:1rem}.fallback-message button:hover{background:#0056b3}.message{padding:.75rem 1rem;margin:.5rem 0;border-radius:4px;font-weight:500;animation:slideIn .3s ease-out}.message-info{background:#d1ecf1;color:#0c5460;border:1px solid #bee5eb}.message-success{background:#d4edda;color:#155724;border:1px solid #c3e6cb}.message-warning{background:#fff3cd;color:#856404;border:1px solid #ffeaa7}.message-error{background:#f8d7da;color:#721c24;border:1px solid #f5c6cb}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.whiteboard-header{padding:1rem;flex-direction:column;gap:1rem;text-align:center}.cache-status{margin-left:0}.instructions{margin:1rem}.whiteboard{margin:1rem;min-height:400px}.sticky-note{width:160px;min-height:120px;padding:8px}.note-textarea{height:80px;font-size:.8rem}.app-title{font-size:1.2rem}}@media (max-width: 480px){.whiteboard-header{padding:.5rem}.instructions{padding:.75rem 1rem;margin:.5rem}.whiteboard{margin:.5rem;min-height:300px}.sticky-note{width:140px;min-height:100px;padding:6px;font-size:.8rem}.note-textarea{height:60px;font-size:.75rem}}@media print{.whiteboard-header,.instructions,.new-note-button,.cache-status,.message{display:none}.whiteboard{margin:0;box-shadow:none;background:white}.sticky-note{box-shadow:0 1px 3px #0000004d;break-inside:avoid}.sticky-note.editing{border:1px solid #333}}@media (prefers-contrast: high){.sticky-note{border:2px solid #000}.sticky-note.editing{border:3px solid #ff0000}.new-note-button{border:2px solid #000}}@media (prefers-reduced-motion: reduce){.sticky-note,.new-note-button,.message{transition:none}.loading-spinner{animation:none}@keyframes slideDown{0%{opacity:0}to{opacity:1}}}