*{box-sizing:border-box;margin:0;padding:0}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}a{color:inherit;text-decoration:none}.galleryItem{display:flex;position:relative}.galleryItem img{width:100%;border-radius:16px;object-fit:cover}.overlay,.saveButton,.overlayIcons{display:none}.galleryItem:hover .overlay{display:block;position:absolute;width:100%;height:100%;top:0;left:0;background-color:#0000004d;border-radius:16px}.galleryItem:hover .saveButton{display:block;background-color:#e50829;color:#fff;border-radius:24px;padding:12px 16px;font-weight:500;cursor:pointer;width:max-content;position:absolute;top:16px;right:16px;border:none}.galleryItem:hover .overlayIcons{display:block;position:absolute;bottom:16px;right:16px;display:flex;align-items:center;gap:8px}.overlayIcons button{width:32px;height:32px;border-radius:100%;background-color:#fff;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer}.overlayIcons button img{width:20px;height:20px}.overlayIcons button:hover{background-color:#f1f1f1}.gallery{display:grid;grid-template-columns:repeat(7,1fr);gap:16px;grid-auto-rows:10px}@media (max-width: 1746px){.gallery{grid-template-columns:repeat(6,1fr)}}@media (max-width: 1509px){.gallery{grid-template-columns:repeat(5,1fr)}}@media (max-width: 1272px){.gallery{grid-template-columns:repeat(4,1fr)}}@media (max-width: 1035px){.gallery{grid-template-columns:repeat(3,1fr)}}@media (max-width: 798px){.gallery{grid-template-columns:repeat(2,1fr)}}@media (max-width: 475px){.gallery{grid-template-columns:repeat(1,1fr)}}.createTop{border-top:1px solid #ccc;border-bottom:1px solid #ccc;padding:16px 0;display:flex;align-items:center;justify-content:space-between}.createTop h1{font-size:20px;font-weight:500}.createTop button{background-color:red;color:#fff;font-weight:500;border:none;outline:none;padding:16px;border-radius:32px;cursor:pointer;font-size:15px}.createTop button{background-color:red}.createBottom{margin-top:32px;display:flex;justify-content:center;gap:64px}.upload{background-color:#ccc;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;border-radius:32px;border:2px dashed #dddddd;width:375px;height:574px;padding:16px}.uploadTitle{display:flex;flex-direction:column;align-items:center;gap:16px}.uploadInfo{position:absolute;bottom:32px;font-size:13px;text-align:center;color:gray}.preview{width:375px;position:relative}.preview img{border-radius:32px;width:100%}.editIcon{position:absolute;top:16px;right:16px;background-color:#fff;width:40px;height:40px;display:flex;align-items:center;justify-content:center;padding:6px;border-radius:50%;cursor:pointer}.createForm{display:flex;flex-direction:column;gap:32px;width:584px}.createFormItem{display:flex;flex-direction:column;gap:8px}.createFormItem label{font-size:13px;color:gray}.createFormItem input,textarea,select{font-size:15px;border:2px solid #e9e9e9;padding:16px;border-radius:16px}.createFormItem textarea{resize:none}small{color:#a6a6a6;font-size:13px}@media (max-width:1104px){.createBottom{flex-direction:column;align-items:center;margin-bottom:64px}}@media (max-width:768px){.createForm{width:100%}}@media (max-width:475px){.upload{width:100%}}.editor{display:flex;gap:16px}.layers{flex:1;display:flex;flex-direction:column;gap:16px;margin-top:32px}.layers h3{font-size:20px;font-weight:500}.layers p{font-size:14px;color:gray;margin-top:4px}.layer{display:flex;align-items:center;gap:8px;padding:8px;border-radius:16px;cursor:pointer;font-weight:300;font-size:14px}.layer:hover,.layer.selected{background-color:#faebd7}.layerImage{width:48px;height:48px;border-radius:8px;overflow:hidden}.workspace{flex:3;display:flex;align-items:center;justify-content:center;background-color:#f0f8ff;padding:64px 0}.canvas{width:375px;border-radius:32px;overflow:hidden;display:flex;align-items:center;justify-content:center;position:relative}.text{position:absolute;z-index:999;max-width:100%;border:1px dashed red}.text input{border:none;outline:none;background-color:transparent;font-size:inherit;cursor:grab;width:100%}.deleteTextButton{position:absolute;top:-36px;right:0;background-color:#f0f8ff;width:32px;height:32px;display:flex;align-items:center;justify-content:center;padding:8px;border-radius:50%;cursor:pointer}.canvas img{width:100%}.options{flex:1}.editingOption{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}.editingOption span{font-weight:500}.editingOption input{border:1px solid #e0e0e0;border-radius:8px;padding:16px}.textColor{position:relative}.colorPreview{width:36px;height:36px;border-radius:50%;cursor:pointer}.colorPicker{position:absolute;top:120%;left:0}.orientations,.sizes{padding:4px;border-radius:8px;background-color:#e0e0e0;display:flex;font-size:14px;font-weight:500;width:max-content}.orientation,.size{padding:8px;border-radius:8px;min-width:36px;display:flex;align-items:center;justify-content:center;cursor:pointer}.orientation.selected,.size.selected{background-color:#fff}.postPage{display:flex;justify-content:center;gap:32px}.postContainer{width:70%;max-height:820px;display:flex;border:1px solid #e9e9e9;border-radius:32px;overflow:hidden}.postImg{flex:1;background-color:#c8bcaf}.postImg img{width:100%;height:100%;object-fit:cover;object-fit:contain}.postDetails{flex:1;height:100%;display:flex;flex-direction:column;gap:32px;padding:16px;overflow:hidden}.postUser{display:flex;align-items:center;gap:8px}.postUser img{width:32px;height:32px;border-radius:50%}.postUser span{font-size:14px}@media (max-width: 1127px){.postContainer{width:100%;margin-right:16px}}@media (max-width: 751px){.postContainer{flex-direction:column;max-height:unset}}.comments{flex:1;display:flex;flex-direction:column;gap:16px;min-height:0}.commentList{flex:1;display:flex;flex-direction:column;gap:16px;overflow-y:auto}.comment{display:flex;gap:16px}.comment img{width:32px;height:32px;border-radius:50%;object-fit:cover}.commentContent{display:flex;flex-direction:column;gap:4px}.coomentUsername{font-weight:500;font-size:14px}.commentText{font-size:14px}.commentTime{font-size:12px;color:gray}.commentForm{background-color:#f0f8ff;padding:16px;border-radius:32px;display:flex;align-items:center;gap:16px}.commentForm input{flex:1;border:none;outline:none;background-color:transparent;font-size:16px}.emoji{cursor:pointer;font-size:20px;position:relative}.emojiPicker{position:absolute;bottom:40px;right:0}.postInteractions{display:flex;align-items:center;justify-content:space-between}.interactionIcons{display:flex;align-items:center;gap:8px;font-weight:500}.interactionIcons img,.interactionIcons svg{cursor:pointer}.postInteractions button{background-color:red;color:#fff;border:none;border-radius:24px;padding:16px;font-weight:700;cursor:pointer}.profilePage{display:flex;flex-direction:column;align-items:center;gap:16px}.profileImg{border-radius:50%;object-fit:cover}.profileName{font-size:36px;font-weight:500}.profileUsername{font-weight:300;color:gray}.followCounts{font-weight:500}.profileInteractions{display:flex;align-items:center;gap:32px}.profileButtons{display:flex;gap:16px}.profileButtons button{border:none;padding:16px;border-radius:32px;font-weight:700;cursor:pointer}.profileButtons button:last-child{background-color:#e63434;color:#fff}.profileButtons button:last-child:disabled{cursor:not-allowed;opacity:.5}.profileButtons button:last-child:hover{background-color:#9b0303;color:#fff}.profileOptions{display:flex;gap:16px;margin-top:32px;margin-bottom:16px;font-weight:500}.profileOptions span{cursor:pointer;padding:8px 0}.profileOptions span:hover{color:gray}.active{border-bottom:3px solid black}.collections{width:100%;display:grid;grid-template-columns:repeat(7,1fr);gap:16px}.collection{margin-bottom:32px;cursor:pointer}.collection img{width:100%;height:100%;object-fit:cover;border-radius:16px}.collectionInfo{display:flex;flex-direction:column;gap:8px}.collectionInfo h1{font-weight:500;font-size:16px}.collectionInfo span{color:gray;font-size:13px}.authPage{width:100vw;height:100vh;display:flex;align-items:center;justify-content:center}.authContainer{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;padding:32px;border-radius:32px;box-shadow:0 0 10px #0000001a}.authContainer h1{font-weight:400}.authContainer form{width:100%;display:flex;flex-direction:column;gap:16px}.formGroup{display:flex;flex-direction:column;gap:8px}.formGroup label{font-size:14px}.formGroup input{padding:16px;border:2px solid #e0e0e0;border-radius:16px}.authContainer button{background-color:red;padding:16px;border:none;border-radius:32px;color:#fff;cursor:pointer;font-weight:700}.authContainer p{font-size:14px;text-align:center;cursor:pointer}.error{color:red}.leftBar{display:flex;flex-direction:column;align-items:center;justify-content:space-between;width:72px;height:100vh;position:sticky;top:0;padding:16px 0;border:1px solid lightgray}.menuIcons{display:flex;flex-direction:column;align-items:center;gap:24px}.menuIcon{width:48px;height:48px;display:flex;align-items:center;justify-content:center}.menuIcon:hover{background-color:#e4e6eb}.logo{width:24px;height:24px}.userButton{display:flex;align-items:center;gap:16px;position:relative}.userButton img{width:36px;height:36px;border-radius:100%;object-fit:cover}.userButton .arrow{cursor:pointer;width:16px;height:16px}.userOptions{position:absolute;right:0;top:120%;padding:16px;background-color:#fff;border-radius:8px;box-shadow:0 0 4px 1px #00000031;z-index:999;display:flex;flex-direction:column;font-size:14px}.userOption{cursor:pointer;padding:8px;border-radius:8px}.userOption:hover{background-color:#e4e6eb;color:gray}.loginLink{font-size:18px;padding:16px;border-radius:32px}.loginLink:hover{background-color:#e4e6eb}@media (max-width: 475px){.userButton{display:none}}.topBar{margin:16px;display:flex;align-items:center;gap:16px}.search{flex:1;border-radius:16px;background-color:#f0f2f5;display:flex;align-items:center;padding:16px;gap:16px}.search input{flex:1;background-color:transparent;border:none;outline:none;font-size:18px}.app{display:flex;gap:16px}.content{flex:1;margin-right:16px}
