:root{--bg-color: #0b0f14;--panel-bg: #111827;--text-main: #e5e7eb;--text-secondary: #9ca3af;--glass-bg: rgba(255, 255, 255, .05);--glass-bg-hover: rgba(255, 255, 255, .08);--glass-border: rgba(255, 255, 255, .12);--accent: #4f46e5;--accent-hover: #6366f1;--danger: #ef4444;--transition: all .2s ease}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);--bg-image: url(https://images.unsplash.com/photo-1534447677768-be436bb09401?q=80&w=2000&auto=format&fit=crop);background-image:var(--bg-image, none);background-size:cover;background-position:center;background-attachment:fixed;color:var(--text-main);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}body:before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;background:#0b0f14b3;z-index:-1;pointer-events:none}.glass{background:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);box-shadow:0 8px 32px #0000004d}header{display:flex;justify-content:space-between;align-items:flex-start;padding:1.5rem 5%;background-color:#00000040;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid var(--glass-border)}.clock-weather{display:flex;flex-direction:column;gap:.25rem}#clock{font-size:3.5rem;font-weight:700;letter-spacing:-1.5px;line-height:1}#date{color:var(--text-secondary);font-size:1.1rem;margin-top:.5rem}#weather{display:flex;align-items:center;gap:.5rem;color:var(--text-secondary);margin-top:.5rem;font-size:.95rem}.glass-btn{background:var(--glass-bg);border:1px solid var(--glass-border);color:var(--text-main);padding:.75rem 1.25rem;border-radius:12px;cursor:pointer;display:flex;align-items:center;gap:.5rem;font-size:.95rem;transition:var(--transition)}.glass-btn:hover{background:var(--glass-bg-hover);transform:translateY(-2px)}main{flex:1;padding:2rem 5%;position:relative}#shortcuts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:1rem;max-width:1400px;margin:0 auto}.shortcut-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:.75rem .5rem;text-decoration:none;color:var(--text-main);transition:var(--transition);position:relative;cursor:grab;border-radius:12px}.shortcut-item:active{cursor:grabbing}.shortcut-item.dragging{opacity:.5;transform:scale(.95)}.shortcut-item:hover{background:var(--glass-bg-hover);transform:translateY(-4px)}.shortcut-icon,.fallback-icon{width:48px;height:48px;border-radius:12px;object-fit:cover}.fallback-icon{background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:600}.shortcut-name{font-size:.9rem;font-weight:500;text-align:center;word-break:break-word;line-height:1.3}.edit-btn{position:absolute;top:8px;right:8px;background:#00000080;border:none;color:#fff;width:28px;height:28px;border-radius:50%;cursor:pointer;opacity:0;transition:var(--transition);display:flex;align-items:center;justify-content:center}.shortcut-item:hover .edit-btn{opacity:1}.float-btn{position:fixed;bottom:2rem;right:2rem;width:56px;height:56px;border-radius:50%;font-size:2rem;padding:0;z-index:10;justify-content:center}.modal{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:50;padding:1rem}.modal.hidden{display:none}.modal-content{width:100%;max-width:400px;padding:2rem;background:var(--panel-bg);border-radius:16px}.form-group{margin-bottom:1.5rem}.form-group label{display:block;margin-bottom:.5rem;color:var(--text-secondary);font-size:.9rem}.form-group input{width:100%;background:#ffffff0d;border:1px solid var(--glass-border);color:#fff;padding:.75rem;border-radius:8px;outline:none;transition:border-color .2s}.form-group input:focus{border-color:var(--accent)}.modal-actions{display:flex;justify-content:flex-end;gap:1rem;margin-top:2rem}.btn-primary{background:var(--accent);border:none}.btn-primary:hover{background:var(--accent-hover)}.btn-danger{background:transparent;color:var(--danger);border:1px solid var(--danger);margin-right:auto}.btn-danger:hover{background:#ef44441a}#notes-panel{position:fixed;top:10%;left:10%;width:80%;height:80vh;z-index:40;display:flex;flex-direction:row;transform:translateY(-20px);opacity:0;pointer-events:none;transition:all .3s cubic-bezier(.4,0,.2,1);background:var(--panel-bg);border-radius:16px;border:1px solid var(--glass-border);box-shadow:0 25px 50px -12px #00000080;overflow:hidden}#notes-panel.open{transform:translateY(0);opacity:1;pointer-events:all}.note-list-item{padding:.75rem 1rem;border-bottom:1px solid rgba(255,255,255,.05);cursor:pointer;border-radius:8px;display:flex;justify-content:space-between;align-items:center;transition:background .2s;margin-bottom:.2rem}.note-list-item:hover{background:#ffffff0d}.note-list-item.active{background:#ffffff26;box-shadow:inset 3px 0 #facc15}.note-title-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-grow:1;font-size:.95rem;display:block;width:150px}.delete-note-btn{background:none;border:none;color:#ef4444;cursor:pointer;padding:.3rem;opacity:0;border-radius:4px;transition:all .2s}.delete-note-btn:hover{background:#ef444433}.note-list-item:hover .delete-note-btn{opacity:1}#notes-list::-webkit-scrollbar{width:6px}#notes-list::-webkit-scrollbar-thumb{background:#fff3;border-radius:6px}.notes-header{padding:1rem;border-bottom:1px solid #eab308;display:flex;justify-content:space-between;align-items:center;background:#facc15;border-radius:0 16px 0 0}.toolbar{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}.toolbar-btn{background:transparent;border:none;color:#111827;padding:.5rem;border-radius:6px;cursor:pointer;transition:background .2s;font-weight:500}.toolbar-btn:hover{background:#0000001a}#toggle-notes{background:#facc15;color:#111827;border-color:#eab308;font-weight:600}#toggle-notes:hover{background:#eab308;transform:translateY(-2px)}#close-notes{color:#111827;border-color:#0003}#close-notes:hover{background:#0000001a}input[type=color]{background:transparent;border:none;padding:0;width:30px;height:30px;cursor:pointer}.notes-editor{flex:1;padding:2rem;outline:none;overflow-y:auto;line-height:1.6;font-size:1.05rem}.notes-editor:empty:before{content:"Start typing here...";color:var(--text-secondary)}@media(max-width:768px){#notes-panel{top:5%;left:5%;width:90%;height:90vh}#clock{font-size:2.5rem}#shortcuts-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}}
