*{margin:0;padding:0;box-sizing:border-box}body{font-family:'Comic Sans MS',cursive;min-height:100vh;overflow-x:hidden}.btn-dashboard{background-color:#444;color:#fff;border:none;padding:6px 12px;border-radius:4px;cursor:pointer;text-decoration:none;display:inline-block;transition:background-color 0.2s;margin-right:auto}.btn-dashboard:hover{background-color:#666}.board-container{width:100%;height:calc(100vh - 40px);background:radial-gradient(circle at 20% 30%,rgb(139 69 19 / .3) 2px,transparent 2px),radial-gradient(circle at 80% 70%,rgb(160 82 45 / .4) 2px,transparent 2px),radial-gradient(circle at 40% 80%,rgb(139 69 19 / .2) 1px,transparent 1px),linear-gradient(45deg,#DEB887 0%,#D2B48C 25%,#CD853F 50%,#D2B48C 75%,#DEB887 100%);background-size:40px 40px,60px 60px,20px 20px,100% 100%;border:25px solid #8B4513;border-radius:15px;box-shadow:inset 0 0 50px rgb(0 0 0 / .3),0 20px 40px rgb(0 0 0 / .4),0 0 0 5px #654321;position:relative;overflow:hidden}.board{width:100%;height:100%;position:relative;cursor:crosshair}.controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px!important}@media (max-width:600px){.controls{flex-direction:column;top:100px;right:20px}}.btn{padding:12px 20px;border:none;border-radius:8px;cursor:pointer;font-weight:700;font-size:14px;transition:all 0.3s ease;box-shadow:0 4px 8px rgb(0 0 0 / .2)}.btn-add{background:linear-gradient(45deg,#32CD32,#228B22);color:#fff}.btn-save{background:linear-gradient(45deg,#4169E1,#0000CD);color:#fff}.btn-load{background:linear-gradient(45deg,#FF6347,#DC143C);color:#fff}.btn:hover{transform:translateY(-2px);box-shadow:0 6px 12px rgb(0 0 0 / .3)}.color-selector{appearance:auto!important;padding:12px 16px;border:none;border-radius:8px;background:linear-gradient(45deg,#6A5ACD,#483D8B);color:#fff;font-weight:700;font-size:14px;cursor:pointer;box-shadow:0 4px 8px rgb(0 0 0 / .2);transition:all 0.3s ease;outline:none}.color-selector:hover{transform:translateY(-2px);box-shadow:0 6px 12px rgb(0 0 0 / .3)}.color-selector option{background:#fff;color:#333;padding:8px}.sticky-note{position:absolute;width:200px;height:200px;padding:15px;border-radius:3px;cursor:move;font-size:14px;line-height:1.4;transition:all 0.3s ease;box-shadow:0 8px 16px rgb(0 0 0 / .2),0 4px 8px rgb(0 0 0 / .1);transform-origin:center;animation:fadeIn 0.5s ease}@keyframes fadeIn{from{opacity:0;transform:scale(.8) rotate(0deg)}to{opacity:1}}.sticky-note::before{content:'';position:absolute;top:3px;left:50%;transform:translateX(-50%);width:16px;height:16px;background:radial-gradient(circle at 30% 30%,#fff 0%,#e0e0e0 40%,#c0c0c0 70%,#999 100%);border-radius:50%;box-shadow:inset 1px 1px 2px rgb(255 255 255 / .8),inset -1px -1px 2px rgb(0 0 0 / .3),0 2px 4px rgb(0 0 0 / .2);border:1px solid #bbb}.sticky-note:hover{transform:scale(1.05);z-index:100;box-shadow:0 12px 24px rgb(0 0 0 / .3),0 6px 12px rgb(0 0 0 / .2)}.sticky-note.yellow{background:linear-gradient(135deg,#FFFF88 0%,#FFD700 100%);color:#333}.sticky-note.pink{background:linear-gradient(135deg,#FFB6C1 0%,#FF69B4 100%);color:#333}.sticky-note.blue{background:linear-gradient(135deg,#87CEEB 0%,#4169E1 100%);color:#fff}.sticky-note.green{background:linear-gradient(135deg,#98FB98 0%,#32CD32 100%);color:#333}.sticky-note.orange{background:linear-gradient(135deg,#FFE4B5 0%,#FFA500 100%);color:#333}.note-content{width:100%;height:100%;border:none;background:#fff0;resize:none;outline:none;font-family:inherit;font-size:inherit;color:inherit;overflow:hidden}.overflow-indicator{position:absolute;bottom:8px;right:8px;font-size:24px;color:rgb(0 0 0 / .6);display:none;animation:pulse 2s infinite;text-shadow:1px 1px 2px rgb(255 255 255 / .8);cursor:pointer;padding:2px;border-radius:50%;transition:all 0.2s ease}.overflow-indicator:hover{background:rgb(255 255 255 / .3);transform:scale(1.2)}@keyframes pulse{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}.note-controls{position:absolute;top:-10px;right:-10px;display:none;gap:5px}.sticky-note:hover .note-controls{display:flex}.note-btn{all:unset;width:25px;height:25px;border:none;border-radius:50%;cursor:pointer;font-size:12px;font-weight:700;box-shadow:0 2px 4px rgb(0 0 0 / .3);transition:transform 0.2s ease;display:flex;justify-content:center;align-items:center;line-height:1;text-align:center}.note-btn:hover{transform:scale(1.1)}.btn-expand{background:#4169E1;color:#fff}.btn-delete{background:crimson;color:#fff}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgb(0 0 0 / .7);z-index:2000;justify-content:center;align-items:center}.modal-content{background:#fff;padding:30px;border-radius:15px;width:90%;max-width:600px;max-height:80%;box-shadow:0 20px 40px rgb(0 0 0 / .3);position:relative}.modal textarea{width:100%;height:300px;border:2px solid #ddd;border-radius:8px;padding:15px;font-size:16px;font-family:inherit;resize:vertical;outline:none}.modal textarea:focus{border-color:#4169E1}.modal textarea.yellow{background:linear-gradient(135deg,#FFFF88 0%,#FFD700 100%);color:#333}.modal textarea.pink{background:linear-gradient(135deg,#FFB6C1 0%,#FF69B4 100%);color:#333}.modal textarea.blue{background:linear-gradient(135deg,#87CEEB 0%,#4169E1 100%);color:#fff}.modal textarea.green{background:linear-gradient(135deg,#98FB98 0%,#32CD32 100%);color:#333}.modal textarea.orange{background:linear-gradient(135deg,#FFE4B5 0%,#FFA500 100%);color:#333}.modal-controls{margin-top:20px;display:flex;gap:10px;justify-content:flex-end}.file-input{display:none}.board::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:repeating-linear-gradient(0deg,transparent,transparent 19px,rgb(139 69 19 / .1) 20px),repeating-linear-gradient(90deg,transparent,transparent 19px,rgb(139 69 19 / .1) 20px);pointer-events:none}@media (max-width:768px){.controls{position:relative;top:0;right:0;margin-bottom:20px;justify-content:center}.board-container{height:calc(100vh - 160px)}.sticky-note{width:150px;height:150px;font-size:12px}}