:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;color:#333;background-color:#fff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh}#root{min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.app{min-height:100vh;background-color:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.container{display:flex;height:100vh;width:100%}.sidebar-section{flex:0 0 auto}.preview-section{flex:1;display:flex;justify-content:center;align-items:center;padding:40px;min-height:100vh;background-color:#f8f9fa}.preview-header{position:absolute;top:20px;left:401px;right:0;display:flex;align-items:center;justify-content:space-between;width:calc(100% - 401px);margin-bottom:40px;padding:0 20px;z-index:10}.preview-header span{font-size:16px;font-weight:400;color:#666}.go-live-btn{background-color:#fff;color:#333;border:1px solid #d1d5db;padding:8px 16px;border-radius:6px;font-size:14px;font-weight:400;cursor:pointer;transition:all .2s ease}.go-live-btn:hover{background-color:#f9fafb;border-color:#9ca3af}*{margin:0;padding:0;box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sidebar{width:400px;padding:30px;background-color:#f8f9fa;border-right:1px solid #e9ecef;height:100vh;overflow-y:auto}.sidebar h2{font-size:20px;font-weight:600;color:#333;margin-bottom:30px}.section-header{display:flex;align-items:center;gap:15px;margin-bottom:30px}.back-btn{background:none;border:none;color:#1976d2;font-size:14px;cursor:pointer;padding:0;font-weight:500}.back-btn:hover{color:#1565c0}.section-header h2{margin-bottom:0}.option-group{margin-bottom:30px}.radio-option{display:flex;align-items:center;gap:12px;margin-bottom:20px;cursor:pointer;font-size:14px;color:#333}.radio-option input[type=radio]{display:none}.radio-custom{width:18px;height:18px;border:2px solid #ccc;border-radius:50%;position:relative;transition:all .2s ease}.radio-option input[type=radio]:checked+.radio-custom{border-color:#1976d2;background-color:#1976d2}.radio-option input[type=radio]:checked+.radio-custom:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;background-color:#fff;border-radius:50%}.option-text{flex:1;font-weight:500}.input-section{margin-top:20px;padding:20px;background-color:#fff;border-radius:8px;border:1px solid #e9ecef}.input-label{display:block;font-size:12px;font-weight:600;color:#333;margin-bottom:8px}.trigger-input{width:100%;padding:10px 14px;border:2px solid #e9ecef;border-radius:6px;font-size:14px;color:#333;background-color:#fff;transition:border-color .2s ease;box-sizing:border-box}.trigger-input:focus{outline:none;border-color:#1976d2}.input-hint{font-size:11px;color:#666;margin-top:8px;margin-bottom:16px}.tags-container{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;background-color:#e3f2fd;color:#1976d2;border-radius:16px;font-size:12px;font-weight:500}.tag-remove{background:none;border:none;color:#1976d2;cursor:pointer;font-size:14px;font-weight:700;padding:0;width:14px;height:14px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .2s ease}.tag-remove:hover{background-color:#1976d21a}.section-title{font-size:16px;color:#666;margin-bottom:20px;display:block}.post-thumbnails{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:20px}.post-thumbnail{width:80px;height:80px;border-radius:12px;overflow:hidden;cursor:pointer;transition:all .2s ease;border:3px solid transparent}.post-thumbnail:hover{transform:scale(1.05);box-shadow:0 4px 12px #00000026}.post-thumbnail.selected{border-color:#1976d2;box-shadow:0 0 0 3px #1976d233}.post-thumbnail img{width:100%;height:100%;object-fit:cover}.show-all-btn{background:none;border:none;color:#1976d2;font-size:14px;cursor:pointer;padding:0;text-decoration:underline;font-weight:500}.show-all-btn:hover{color:#1565c0}.notification-options{margin:40px 0}.notification-item{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid #e9ecef}.notification-item span{font-size:14px;color:#333}.pro-badge{background-color:#1976d2;color:#fff;padding:4px 10px;border-radius:6px;font-size:12px;font-weight:600}.next-section{margin-top:40px}.next-btn{background-color:#6c757d;color:#fff;border:none;padding:10px 20px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.next-btn:hover{background-color:#5a6268}.next-section h3{font-size:18px;font-weight:600;color:#333}.toggle-switch{margin-left:auto}.toggle-switch input{opacity:0;width:0;height:0}.slider{position:relative;display:inline-block;width:34px;height:20px;background-color:#ccc;border-radius:20px;transition:.4s;cursor:pointer}.slider:before{position:absolute;content:"";height:16px;width:16px;left:2px;bottom:2px;background-color:#fff;border-radius:50%;transition:.4s}.toggle-switch input:checked+.slider{background-color:#28a745}.toggle-switch input:checked+.slider:before{transform:translate(14px)}.dm-preview{margin:15px 0;padding:15px;background-color:#f8f9fa;border-radius:8px;border-left:3px solid #007bff}.dm-preview p{margin:8px 0;color:#333;font-size:14px;line-height:1.4}.dm-textarea{width:100%;margin:8px 0;padding:8px;border:1px solid #ddd;border-radius:4px;font-size:14px;font-family:inherit;resize:vertical;min-height:40px}.dm-link-btn{background-color:#007bff;color:#fff;border:none;padding:8px 16px;border-radius:20px;font-size:12px;cursor:pointer;margin-top:10px}.dm-link-btn-editable{background-color:#007bff;color:#fff;border:none;padding:8px 16px;border-radius:20px;font-size:12px;margin-top:10px;width:100%;max-width:200px;text-align:center}.dm-options{margin:20px 0}.dm-options p{color:#666;font-size:13px;margin-bottom:15px}.dm-input{margin:15px 0}.dm-text-input{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;font-size:14px;margin-bottom:8px}.dm-hint{color:#666;font-size:12px;margin:5px 0}.add-link-btn{background:none;border:none;color:#007bff;font-size:14px;cursor:pointer;text-decoration:underline}.phone-mockup{display:flex;flex-direction:column;align-items:center;gap:20px;width:100%;height:100%;justify-content:center}.phone-screen{width:400px;height:800px;background-color:#000;border-radius:35px;padding:25px 0;box-shadow:0 0 50px #0006;position:relative;overflow:hidden;border:8px solid #1a1a1a}.phone-header{display:flex;align-items:center;padding:0 25px 20px;color:#fff;gap:20px}.back-arrow{font-size:24px;cursor:pointer}.header-title{text-align:center;flex:1}.brand-name{font-size:20px;font-weight:600;letter-spacing:1px}.subtitle{font-size:16px;color:#ccc}.post-container{background-color:#000;color:#fff;height:calc(100% - 140px);overflow-y:auto;display:flex;flex-direction:column;position:relative}.post-background{width:100%;transition:opacity .3s ease}.post-background.dimmed{opacity:.3;filter:blur(1px)}.post-header{display:flex;justify-content:space-between;align-items:center;padding:0 20px 15px}.user-info{display:flex;align-items:center;gap:12px}.profile-pic{width:40px;height:40px;border-radius:50%;overflow:hidden}.profile-pic img{width:100%;height:100%;object-fit:cover}.username{font-size:16px;font-weight:600}.more-options{font-size:22px;cursor:pointer}.post-image{width:100%;aspect-ratio:1;overflow:hidden}.post-image img{width:100%;height:100%;object-fit:cover}.post-actions{display:flex;justify-content:space-between;align-items:center;padding:20px}.action-buttons{display:flex;align-items:center;gap:20px}.action-btn,.bookmark-btn{background:none;border:none;color:#fff;font-size:22px;cursor:pointer;padding:0;transition:all .2s ease}.action-btn:hover,.bookmark-btn:hover{transform:scale(1.1)}.likes-count,.comments-count{font-size:16px;color:#fff;margin-left:-12px}.post-content{padding:0 20px;line-height:1.5}.post-text{margin-bottom:12px}.post-text .username{font-weight:600;margin-right:8px}.verified-badge{margin-right:8px}.text{font-size:16px}.hashtags{color:#1976d2;font-size:16px;margin-bottom:12px}.view-comments{color:#888;font-size:16px;margin-bottom:8px;cursor:pointer;transition:color .2s ease}.view-comments:hover{color:#fff}.post-time{color:#888;font-size:14px;text-transform:uppercase}.comments-overlay{position:absolute;bottom:0;left:0;right:0;z-index:1000}.phone-bottom-nav{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-around;align-items:center;padding:20px 0;background-color:#000;border-top:1px solid #333;z-index:999}.nav-item{background:none;border:none;color:#fff;font-size:24px;cursor:pointer;padding:8px}.bottom-tabs{display:flex;gap:0;background-color:#f8f9fa;border-radius:30px;overflow:hidden;box-shadow:0 4px 15px #00000026}.tab{padding:15px 30px;border:none;background-color:transparent;color:#666;font-size:16px;font-weight:500;cursor:pointer;transition:all .2s ease}.tab:hover{background-color:#e9ecef}.tab.active{background-color:#1976d2;color:#fff}.tab:first-child{border-top-left-radius:30px;border-bottom-left-radius:30px}.tab:last-child{border-top-right-radius:30px;border-bottom-right-radius:30px}.comments-overlay-container{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(180deg,#1a1a1a,#2d2d2d);border-radius:20px 20px 0 0;height:70%;display:flex;flex-direction:column;animation:slideUp .3s ease-out;box-shadow:0 -10px 30px #00000080;z-index:1000}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.drag-handle{width:40px;height:4px;background-color:#666;border-radius:2px;margin:12px auto;opacity:.6}.comments-header{display:flex;align-items:center;justify-content:space-between;padding:0 20px 15px;border-bottom:1px solid #333}.comments-header h3{font-size:16px;font-weight:600;color:#fff;margin:0}.header-actions{display:flex;align-items:center;gap:10px}.send-btn,.close-btn{background:none;border:none;color:#fff;padding:6px;border-radius:50%;cursor:pointer;transition:all .2s ease;font-size:16px}.send-btn:hover,.close-btn:hover{background-color:#ffffff1a}.comments-list{flex:1;overflow-y:auto;padding:15px 20px}.empty-comments{display:flex;align-items:center;justify-content:center;height:100%;text-align:center}.empty-comments p{color:#999;font-size:14px;line-height:1.5;margin:0}.comment-item{display:flex;align-items:flex-start;gap:12px;margin-bottom:15px}.comment-avatar{flex-shrink:0}.comment-avatar img{width:32px;height:32px;border-radius:50%;object-fit:cover}.comment-content{flex:1;min-width:0}.comment-header{display:flex;align-items:center;gap:8px;margin-bottom:4px}.comment-username{font-size:12px;font-weight:600;color:#fff}.comment-time{font-size:11px;color:#999}.comment-text{font-size:13px;color:#fff;line-height:1.4;margin-bottom:6px}.comment-actions{margin-top:4px}.reply-btn{background:none;border:none;color:#999;font-size:11px;cursor:pointer;padding:0;text-decoration:underline}.reply-btn:hover{color:#fff}.comment-like{background:none;border:none;color:#999;padding:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:50%;width:24px;height:24px;transition:all .2s ease;font-size:12px}.comment-like:hover{background-color:#ffffff1a;color:#fff}.emoji-reactions{display:flex;gap:8px;padding:10px 20px;border-bottom:1px solid #333}.emoji-btn{background:none;border:none;font-size:16px;padding:6px;cursor:pointer;width:32px;height:32px;border-radius:50%;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.emoji-btn:hover{background-color:#ffffff1a;transform:scale(1.1)}.comment-input{display:flex;align-items:center;gap:12px;padding:15px 20px}.input-avatar{flex-shrink:0}.input-avatar .avatar-circle{width:32px;height:32px;border-radius:50%;background-color:#333;display:flex;align-items:center;justify-content:center;overflow:hidden}.input-avatar img{width:100%;height:100%;object-fit:cover}.input-field{flex:1}.input-field input{width:100%;background-color:#333;border:none;border-radius:20px;padding:10px 15px;color:#fff;font-size:13px;outline:none}.input-field input::placeholder{color:#999}.input-field input:focus{border-color:#1976d2}.comments-view{height:100%;display:flex;flex-direction:column;background-color:#000;color:#fff;padding:15px}.comments-view .comments-header{padding:20px;border-bottom:1px solid #e9ecef}.comments-view .comments-header h3{font-size:18px;color:#333}.comments-view .header-actions{gap:15px}.comments-view .send-btn,.comments-view .close-btn{padding:8px;font-size:18px;color:#333}.comments-view .comments-list{padding:20px}.comments-view .comment-item{gap:15px;margin-bottom:20px}.comments-view .comment-avatar img{width:40px;height:40px}.comments-view .comment-header{gap:10px;margin-bottom:6px}.comments-view .comment-username{font-size:14px;color:#333}.new-badge{background-color:#1976d2;color:#fff;padding:2px 6px;border-radius:8px;font-size:10px;font-weight:600;text-transform:uppercase}.comments-view .comment-text{font-size:14px;color:#333;line-height:1.5;margin-bottom:8px}.comments-view .comment-time{font-size:12px;color:#666}.comment-menu{padding:5px;cursor:pointer;color:#888}.comment-menu:hover{color:#fff}.comments-view .emoji-reactions{gap:10px;padding:15px 20px}.comments-view .emoji-btn{font-size:18px;padding:8px;width:36px;height:36px}.comments-view .comment-input{gap:15px;padding:20px}.comments-view .input-avatar .avatar-circle{width:40px;height:40px}.comments-view .input-field input{padding:12px 18px;font-size:14px}.dm-view{height:100%;background-color:#000;color:#fff}.conversations-list{height:100%;display:flex;flex-direction:column;padding:15px}.dm-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid #333}.dm-header h3{font-size:18px;font-weight:600}.new-message-btn{background:none;border:none;color:#fff;font-size:18px;cursor:pointer;padding:5px}.conversations{flex:1;overflow-y:auto}.conversation-item{display:flex;gap:12px;padding:15px 0;border-bottom:1px solid #222;cursor:pointer;transition:background-color .2s ease}.conversation-item:hover{background-color:#111}.conversation-item.unread{background-color:#0a0a0a}.conversation-avatar{position:relative;width:48px;height:48px;border-radius:50%;overflow:hidden;flex-shrink:0}.conversation-avatar img{width:100%;height:100%;object-fit:cover}.unread-indicator{position:absolute;top:-2px;right:-2px;width:12px;height:12px;background-color:#1976d2;border-radius:50%;border:2px solid #000}.conversation-content{flex:1;min-width:0}.conversation-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}.conversation-username{font-weight:600;font-size:15px}.conversation-time{font-size:12px;color:#888}.conversation-preview{font-size:14px;color:#aaa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.conversation-item.unread .conversation-preview{color:#fff;font-weight:500}.chat-view{height:100%;display:flex;flex-direction:column}.chat-header{display:flex;align-items:center;gap:15px;padding:15px;border-bottom:1px solid #333;justify-content:space-between}.chat-user-info,.chat-header-actions{display:flex;align-items:center;gap:10px}.edit-messages-btn{background:#007bff;color:#fff;border:none;padding:6px 12px;border-radius:4px;font-size:12px;cursor:pointer}.edit-messages-btn:hover{background:#0056b3}.edit-messages-panel{padding:15px;background:#111;border-bottom:1px solid #333}.edit-field{margin-bottom:15px}.edit-field label{display:block;color:#ccc;font-size:12px;margin-bottom:5px}.edit-field textarea,.edit-field input{width:100%;padding:8px;border:1px solid #555;background:#222;color:#fff;border-radius:4px;font-size:14px;resize:vertical}.back-btn{background:none;border:none;color:#fff;font-size:18px;cursor:pointer;padding:5px}.chat-user-info{flex:1;display:flex;align-items:center;gap:10px}.chat-user-info img{width:32px;height:32px;border-radius:50%;object-fit:cover}.chat-user-info span{font-weight:600;font-size:16px}.chat-options{background:none;border:none;color:#fff;font-size:18px;cursor:pointer;padding:5px}.messages-container{flex:1;overflow-y:auto;padding:15px;display:flex;flex-direction:column;gap:10px}.message{display:flex;max-width:80%}.message.own{align-self:flex-end}.message.other{align-self:flex-start}.message-bubble{background:#333;border-radius:18px;padding:12px 16px;position:relative}.message.own .message-bubble{background:#1976d2}.message-text{font-size:14px;line-height:1.4;margin-bottom:4px}.message-button{background:#007bff;color:#fff;border:none;padding:10px 16px;border-radius:20px;font-size:14px;cursor:pointer;transition:background-color .2s ease;margin-bottom:4px}.message-button:hover{background:#0056b3}.message-time{font-size:11px;color:#aaa;text-align:right}.message.other .message-time{text-align:left}.message-input{display:flex;gap:10px;align-items:center;padding:15px;border-top:1px solid #333}.message-input input{flex:1;background:#222;border:1px solid #444;border-radius:20px;padding:12px 16px;color:#fff;font-size:14px}.message-input input::placeholder{color:#888}.message-input input:focus{outline:none;border-color:#1976d2}.send-btn{background:#1976d2;color:#fff;border:none;border-radius:18px;padding:10px 20px;font-size:14px;font-weight:600;cursor:pointer;transition:background-color .2s ease}.send-btn:hover{background:#1565c0}