:root { --npd-accent:#4361ee;--npd-accent-deep:#3a56d4;--npd-accent-light:#e6f0ff;--npd-body-text:#2b2d42;--npd-bg:#f8f9fa;--npd-white:#ffffff;--npd-border:#d8dce2;--npd-danger:#ff422d;--npd-success:#2ecc71;--npd-success-deep:#27ae60;--npd-radius:3px;--npd-gap-size:10px;--npd-transition:all 0.2s ease;} #npd-app-container { display:flex;flex-direction:column;width:100%;min-height:100vh;margin:0 auto;border:1px solid var(--npd-border);border-radius:var(--npd-radius);transition:opacity 0.5s ease-in-out;box-sizing:border-box;} .npd-header-actions { display:flex;gap:8px 12px;justify-content:end;align-items:center;flex-wrap:wrap;width:100%;color:var(--npd-body-text) !important;} .npd-icon-btn { background-color:var(--npd-white) !important;border:1px solid var(--npd-border) !important;padding:8px 10px !important;color:var(--npd-body-text) !important;border-radius:var(--npd-radius);cursor:pointer;transition:var(--npd-transition);font-size:1rem;display:flex;align-items:center;gap:5px;} .npd-icon-btn:hover { background-color:var(--npd-accent-light) !important;} #npd-auto-save-status { color:var(--npd-accent) !important;font-size:0.9rem !important;margin-right:10px;opacity:0;transition:opacity 0.3s ease-in-out;} .npd-dropdown { position:relative;display:inline-block;} .npd-dropdown-content { display:none;position:absolute;background-color:var(--npd-white) !important;min-width:160px;z-index:1;border:1px solid var(--npd-border) !important;border-radius:var(--npd-radius);right:0;top:100%;overflow:hidden;} .npd-dropdown-content a { color:var(--npd-body-text) !important;padding:10px !important;text-decoration:none;display:block;font-size:0.9rem !important;transition:background-color 0.1s ease;} .npd-dropdown-content a:hover { background-color:var(--npd-accent-light) !important;color:var(--npd-accent-deep) !important;} .npd-dropdown:hover .npd-dropdown-content { display:block;} #npd-main-content { display:flex;flex:1;} #npd-sidebar { width:270px;min-width:250px;background-color:var(--npd-white) !important;border-right:1px solid var(--npd-border) !important;padding:10px;display:flex;flex-direction:column;gap:var(--npd-gap-size);} .npd-search-bar { position:relative;width:100%;height:48px !important;display:flex;align-items:center;justify-content:start;} #npd-search-input { width:100%;height:100%;padding:8px 10px 8px 35px !important;border:1px solid var(--npd-border);border-radius:var(--npd-radius);font-size:0.9rem !important;} .npd-search-icon { position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--npd-body-text);font-size:0.85rem !important;} .npd-new-note-sidebar-btn { background-color:var(--npd-accent) !important;color:var(--npd-white) !important;height:48px !important;border:none;padding:0 15px;border-radius:var(--npd-radius);cursor:pointer;font-size:1rem;transition:var(--npd-transition);display:flex;align-items:center;justify-content:center;gap:8px;} .npd-new-note-sidebar-btn:hover { background-color:var(--npd-accent-deep) !important;} #npd-notes-list { flex:1;display:flex;flex-direction:column;gap:var(--npd-gap-size);overflow-y:auto;scrollbar-width:thin;min-height:50px;max-height:660px;padding:1px;} #npd-no-notes-message { text-align:center;color:#6c757d;font-size:0.95rem !important;padding:15px 0;} .npd-hidden { display:none !important;} .npd-note-item { display:flex;justify-content:space-between;align-items:start;background-color:var(--npd-bg);padding:15px 10px;border-radius:var(--npd-radius);cursor:pointer;transition:var(--npd-transition);border:1px solid var(--npd-border);position:relative;} .npd-note-item:hover { background-color:var(--npd-accent-light) !important;border-color:var(--npd-accent-light) !important;} .npd-note-item.npd-active-note { background-color:var(--npd-accent-light) !important;color:var(--npd-body-text) !important;font-weight:500;border-color:var(--npd-accent-light) !important;} .npd-note-title { font-size:1rem;margin-bottom:5px;display:block;text-transform:capitalize;margin-right:12px !important;} .npd-note-date { font-size:0.85rem !important;color:#6c757d;display:block;font-weight:400;} .npd-delete-note-btn { position:absolute;right:8px !important;top:8px !important;background:none !important;border:none;color:var(--npd-danger) !important;cursor:pointer;font-size:0.95rem !important;padding:5px !important;border-radius:var(--npd-radius);transition:var(--npd-transition);opacity:0;} .npd-note-item:hover .npd-delete-note-btn { opacity:1;} .npd-delete-note-btn:hover { background-color:rgba(231, 76, 60, 0.1) !important;} #npd-editor-section { flex:1;padding:var(--npd-gap-size);display:flex;flex-direction:column;gap:var(--npd-gap-size);} #npd-note-title-input { width:100%;height:48px !important;border:1px solid var(--npd-border);padding:0 15px;font-size:1rem !important;border-radius:var(--npd-radius);color:var(--npd-body-text);text-transform:capitalize;} #npd-note-title-input:focus { outline:none;border-color:var(--npd-accent);box-shadow:0 0 0 2px var(--npd-accent-light);} #npd-toolbar { display:flex;flex-wrap:wrap;gap:12px 6px;padding:10px;border:1px solid var(--npd-border);border-radius:var(--npd-radius);align-items:center;} .npd-toolbar-btn, .npd-toolbar-select { padding:8px 10px !important;border:1px solid var(--npd-border);border-radius:var(--npd-radius);cursor:pointer;font-size:0.9rem !important;color:var(--npd-body-text) !important;transition:var(--npd-transition);} .npd-toolbar-select { width:110px;appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 5px center;background-size:15px;text-overflow:ellipsis;} .npd-toolbar-btn { background-color:var(--npd-white) !important;color:var(--npd-body-text);} .npd-toolbar-btn:hover { background-color:var(--npd-accent-light) !important;} .npd-color-picker-label { display:flex;align-items:center;justify-content:center;width:40px;height:34px;border:1px solid var(--npd-border);border-radius:var(--npd-radius);background-color:var(--npd-white);cursor:pointer;position:relative;transition:var(--npd-transition);} .npd-color-picker-label i { color:var(--npd-body-text);font-size:1em;} .npd-color-picker-label:hover { background-color:var(--npd-accent-light) !important;} .npd-color-picker { position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;} #npd-editor-content { height:500px;max-height:650px;border:1px solid var(--npd-border);border-radius:var(--npd-radius);padding:15px;font-size:1rem;overflow-y:auto;scrollbar-width:thin;flex:1;background-color:var(--npd-white);cursor:text;} #npd-editor-content:focus { outline:none;border-color:var(--npd-accent-light);} body.npd-fullscreen #npd-app-container { min-height:100vh;border-radius:0;padding:15px;} body.npd-fullscreen #npd-main-content { flex:1;} body.npd-fullscreen #npd-sidebar { display:none;} body.npd-fullscreen #npd-editor-section { padding:0;} body.npd-fullscreen #npd-editor-content { min-height:calc(100vh - 120px - 150px);} #npd-editor-stats { display:flex;justify-content:flex-end;align-items:center;gap:20px;padding:15px 10px;font-size:0.95rem !important;color:#6c757d;border:1px solid var(--npd-border);border-radius:var(--npd-radius);} .npd-modal { display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgba(0, 0, 0, 0.4);justify-content:center;align-items:center;} .npd-modal-content { background-color:var(--npd-white);padding:15px 10px;border-radius:var(--npd-radius);width:90%;max-width:400px;position:relative;text-align:center;} #npd-alert-message { margin:20px 0;font-size:1rem;color:var(--npd-body-text);text-transform:capitalize;} #npd-alert-ok-btn { background-color:var(--npd-accent) !important;color:var(--npd-white) !important;border:none;padding:10px 20px;border-radius:var(--npd-radius);cursor:pointer;font-size:0.9rem !important;transition:var(--npd-transition);} #npd-alert-ok-btn:hover { background-color:var(--npd-accent-deep) !important;} .npd-tooltip { position:relative;} .npd-tooltip::before, .npd-tooltip::after { --scale:0;--tooltip-color:#333;--arrow-size:6px;position:absolute;top:-0.25rem;left:50%;transform:translateX(-50%) translateY(var(--translate-y, 0)) scale(var(--scale));transition:transform var(--npd-transition);transform-origin:bottom center;} .npd-tooltip::before { content:attr(data-tooltip);background-color:var(--tooltip-color);color:var(--npd-white);padding:0.5rem 0.8rem;border-radius:var(--npd-radius);font-size:0.8rem !important;white-space:nowrap;z-index:100;pointer-events:none;} .npd-tooltip:hover::before, .npd-tooltip:hover::after { --scale:1;--translate-y:-100%;} .npd-tooltip::after { content:"";border:var(--arrow-size) solid transparent;border-top-color:var(--tooltip-color);transform-origin:top center;top:calc(-0.25rem + var(--arrow-size));pointer-events:none;} @media (max-width:768px) { #npd-main-content { flex-direction:column;} #npd-app-container { border-radius:0;} #npd-toolbar { justify-content:center;padding:5px;} #npd-sidebar { width:100%;border:none;border-bottom:1px solid var(--npd-border);} #npd-editor-content { max-height:400px !important;} #npd-notes-list { min-height:100px;max-height:300px !important;} } @media (max-width:480px) { #npd-sidebar { width:100%;border-bottom:1px solid var(--npd-border);} #npd-editor-content { max-height:300px;} #npd-editor-stats { flex-direction:column;align-items:center;gap:10px;} }