*{margin:0;padding:0;box-sizing:border-box;font-family:Poppins,sans-serif}body{background:linear-gradient(to right top,#f0f2f5,#e0e6ed);min-height:100vh;overflow:hidden;display:flex;justify-content:center;align-items:center}.app-container{display:flex;width:95vw;height:90vh;background:#ffffff1a;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:20px;box-shadow:0 8px 30px #00000026;overflow:hidden}.sidebar{width:18%;min-width:200px;background:#ffffff26;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-right:1px solid rgba(255,255,255,.2);padding:18px;display:flex;flex-direction:column}.title{display:flex;align-items:center;gap:6px;width:210px;justify-content:center}.title h1{font-size:36px}.logo{width:36px;height:36px}.note{display:flex;justify-content:center;margin-top:15px}.note-button{background:linear-gradient(to right,#667eea,#764ba2);color:#fff;font-weight:600;border:none;border-radius:12px;padding:10px 14px;cursor:pointer;transition:.3s ease;box-shadow:0 4px 12px #667eea4d;width:200px;font-size:16px}.note-button:hover{transform:translateY(-2px);box-shadow:0 6px 18px #667eea66}.home{padding:10px 12px;border-radius:8px;font-weight:600;color:#333;transition:background .2s;cursor:pointer;display:flex;width:195px;margin-top:20px;height:50px;align-items:center;gap:6px;font-size:20px}.home:hover{background-color:#e0e6ed}.list{margin-top:1rem;height:55vh;overflow-y:auto;padding-right:6px}.list::-webkit-scrollbar{width:6px}.list::-webkit-scrollbar-thumb{background-color:#0003;border-radius:4px}.list span{font-weight:600;font-size:14px;margin-bottom:5px;color:#666}.list p{padding:8px 10px;border-radius:8px;font-size:.95rem;color:#333;cursor:pointer;transition:background .2s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:block}.list p:hover{background-color:#e0e6ed}.search-container{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;width:70vw;height:60px}.search-outer{width:75vw;height:60px;display:flex;justify-content:center}.searchbar{display:flex;align-items:center;background-color:#ffffff4d;border-radius:30px;padding:0 16px;width:60%;height:40px;border:1px solid rgba(0,0,0,.05);box-shadow:inset 0 1px 2px #00000014}.search-input{color:#444;font-size:1rem;flex:1;background-color:transparent;border:none}.search-input:focus{outline:none}.glass-icon{margin-right:10px;font-size:16px;color:#666}.toggle-mode{background-color:#ffffff4d;border-radius:50%;height:40px;width:40px;display:flex;justify-content:center;align-items:center;font-size:18px;cursor:pointer;transition:background .3s;margin-right:16px;border:1px solid rgba(0,0,0,.1)}.toggle-mode:hover{background-color:#ffffff80}.sign-out .signout-btn{padding:8px 16px;border-radius:25px;background-color:#ffffff40;border:1px solid rgba(0,0,0,.1);color:#444;font-weight:600;cursor:pointer;transition:background .3s ease,box-shadow .2s ease;height:40px;width:100px}.signout-btn:hover{background-color:#fff6;box-shadow:0 4px 12px #00000026}.welcome-container{height:220px}.homepage-header{padding:30px 40px;background:linear-gradient(135deg,#f0f4ff,#f9f9ff);border-radius:20px;margin:30px 40px;box-shadow:0 4px 12px #0000000d;font-family:Quicksand,sans-serif}.welcome-text{font-size:40px;font-weight:700;color:#333}.homepage-message{margin-top:15px;font-size:18px;color:#555;line-height:1.6}.header-note{color:#667eea}.note-editor.active{display:flex;flex-direction:column;gap:15px;padding:20px;margin:30px}.note-title-input{font-size:28px;font-weight:600;border:none;outline:none;background:transparent;padding:4px;color:#3d2258;flex:1}.note-title-input:focus{outline:none;border-bottom:2px solid #764ba2}.note-header{display:flex;justify-content:space-between;align-items:center;gap:12px}.note-icons{display:flex;gap:10px;font-size:20px;color:#555;cursor:pointer}.note-icons i:hover{color:#000}.last-modified{font-size:14px;color:#707070;text-align:right}.note-content-wrapper{display:flex;flex-direction:column;height:360px;overflow:hidden}.note-content-input:empty:before{content:attr(data-placeholder);color:#777;pointer-events:none;display:block}.note-content-input{flex:1;font-size:18px;height:320px;border:none;background:transparent;color:#333;resize:none;line-height:1.5;outline:none;transition:border .2s ease-in-out;width:100%;max-height:300px;white-space:pre-wrap;overflow-y:auto}.note-content-input:focus{outline:none}.note-content-input::-webkit-scrollbar{width:6px}.note-content-input::-webkit-scrollbar-thumb{background-color:#bbb;border-radius:4px}.note-content-input::-webkit-scrollbar-thumb:hover{background-color:#999}.note-content-input::-webkit-scrollbar-track{background:transparent}.note-toolbar{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;padding:10px 12px;background:var(--toolbar-bg);position:sticky;bottom:0;z-index:5;justify-content:center;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.note-toolbar button{background:var(--button-bg);color:var(--button-text);border:1px solid var(--border-color);border-radius:10px;padding:8px 14px;font-size:16px;cursor:pointer;transition:all .25s ease;display:flex;align-items:center;justify-content:center;min-width:40px;box-shadow:var(--button-shadow)}.note-toolbar button:hover{background:var(--button-hover-bg);transform:translateY(-2px)}.note-toolbar button:active{transform:scale(.95);background:var(--button-active-bg)}:root{--button-bg: #fff;--button-hover-bg: #f5f5f5;--button-active-bg: #ececec;--button-text: #333;--border-color: #ddd;--button-shadow: 0 2px 6px rgba(0,0,0,.08)}.starred-outer{margin:32px}.starred{margin-top:32px;font-size:1.4rem;font-weight:600;color:#444;display:flex;margin-bottom:15px;gap:10px}.starred .star{color:gold;text-shadow:1px 1px 2px rgba(0,0,0,.3)}.starred-wrapper{width:70vw;position:relative;display:flex;align-items:center;margin-left:10px}.starred-container{display:flex;gap:18px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;flex:1;padding:10px 40px}.empty-starred{text-align:center;color:#555;opacity:.9}.empty-starred img{max-width:140px;opacity:.9}.starred-container::-webkit-scrollbar{display:none}.starred-notes{background:#ffffff80;border-radius:16px;padding:14px 60px 14px 18px;min-width:220px;max-width:260px;box-shadow:0 6px 20px #0000001a;position:relative;font-size:.95rem;flex-shrink:0;display:flex;align-items:center;cursor:pointer}.starred-title{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.arrow{position:absolute;top:50%;transform:translateY(-50%);background:linear-gradient(to right,#667eea,#764ba2);color:#fff;padding:10px;border-radius:50%;cursor:pointer;z-index:2;height:30px;width:30px;display:flex;align-items:center;justify-content:center}.arrow.left{left:-30px}.arrow.right{right:-30px}.starred-icons{position:absolute;top:10px;right:14px;display:flex;gap:10px}.star{color:gold;cursor:pointer}.trash{color:#dc143c;cursor:pointer}.dark-mode{background:linear-gradient(to right top,#1e1e1e,#2c2c2c);color:#f1f1f1}body.dark-mode{background:linear-gradient(to right top,#1e1e1e,#121212)}.dark-mode .app-container{background:#1e1e1ecc;box-shadow:0 8px 30px #0009}.dark-mode .sidebar{background:#282828e6;border-right:1px solid rgba(255,255,255,.1)}.dark-mode .home{color:#ddd}.dark-mode .home:hover{background-color:#333}.dark-mode .note-button{background:linear-gradient(to right,#444,#666);box-shadow:0 4px 12px #0006}.dark-mode .note-button:hover{background:linear-gradient(to right,#555,#777);box-shadow:0 6px 18px #00000080}.dark-mode .searchbar{background-color:#ffffff1a;border:1px solid rgba(255,255,255,.05)}.dark-mode .search-input{color:#eee}.dark-mode .glass-icon{color:#bbb}.dark-mode .toggle-mode{background-color:#ffffff1a;border:1px solid rgba(255,255,255,.1)}.dark-mode .toggle-mode:hover{background-color:#fff3}.dark-mode .signout-btn{background-color:#ffffff26;color:#eee}.dark-mode .signout-btn:hover{background-color:#ffffff40}.dark-mode .homepage-header{background:linear-gradient(135deg,#2c2c2c,#1a1a1a);color:#eee}.dark-mode .welcome-text{color:#f5f5f5}.dark-mode .homepage-message{color:#ccc}.dark-mode .note-title-input{color:#fff}.dark-mode .note-title-input:focus{border-bottom:2px solid #aaa}.dark-mode .note-content-input{color:#ddd}.dark-mode .note-icons{color:#bbb}.dark-mode .note-icons i:hover{color:#fff}.dark-mode .last-modified,.dark-mode .list span{color:#aaa}.dark-mode .list p{color:#ddd}.dark-mode .list p:hover{background-color:#333}.dark-mode .starred{color:#ddd}.dark-mode .empty-starred{color:#aaa}.dark-mode .starred-notes{background:#282828b3;color:#eee;box-shadow:0 6px 20px #00000080}.dark-mode .arrow{background:linear-gradient(to right,#555,#777)}@media (max-width: 1024px){.sidebar{width:22%}.searchbar{width:75%}.note-content-wrapper{height:auto;flex:1}}@media (max-width: 768px){.app-container{flex-direction:column;height:auto;width:100vw}.sidebar{width:100%;min-width:unset;flex-direction:row;justify-content:space-between;align-items:center;overflow-x:auto;padding:10px}.title{flex:1;justify-content:flex-start}.home{font-size:16px;height:40px;width:auto;padding:6px 10px}.list{display:none}.search-container{flex-direction:column;height:auto;gap:12px;width:100%}.searchbar{width:90%}.starred-wrapper{width:100%;margin:10px 0}}@media (max-width: 480px){.title h1{font-size:24px}.logo{width:28px;height:28px}.note-button{width:140px;font-size:14px;padding:8px 10px}.homepage-header{padding:20px;margin:20px}.welcome-text{font-size:24px}.homepage-message{font-size:14px}.note-title-input{font-size:20px}.note-content-input{font-size:16px}.starred-notes{min-width:160px;max-width:200px;font-size:.8rem}.note-toolbar{gap:6px;padding:6px}.note-toolbar button{padding:6px 10px;font-size:14px}}