body{background-color:#f5f5f5}#root{min-height:100vh}:root{--card-size:16px}.language-selector.inline{align-items:center;display:flex;flex-wrap:wrap;gap:16px;justify-content:center}.lang-text-btn{background:#0000;border:none;border-radius:16px;color:#9cabab;cursor:pointer;font-size:14px;font-weight:400;padding:6px 12px;transition:all .15s ease}.lang-text-btn:hover{background:#0000000d;color:#384344}.lang-text-btn.active{background:#fee665;color:#2f3e3f;font-weight:600}.language-selector.toggle{position:relative}.lang-toggle-btn{align-items:center;background:#fff;border:1px solid #cdd7d4;border-radius:8px;color:#384344;cursor:pointer;display:flex;font-size:14px;font-weight:500;gap:4px;padding:8px 12px;transition:all .15s ease}.lang-toggle-btn:hover{border-color:#9cabab;color:#2f3e3f}.lang-toggle-btn .chevron{height:16px;transition:transform .2s ease;width:16px}.lang-toggle-btn .chevron.open{transform:rotate(180deg)}.lang-dropdown{animation:dropdownFadeIn .15s ease-out;background:#fff;border-radius:8px;box-shadow:0 4px 16px #0000001f;margin-top:4px;min-width:120px;overflow:hidden;position:absolute;right:0;top:100%;z-index:1000}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.lang-option{background:#0000;border:none;color:#384344;cursor:pointer;display:block;font-size:14px;font-weight:400;padding:10px 16px;text-align:left;transition:all .15s ease;width:100%}.lang-option:hover{background:#f5f9f8}.lang-option.active{background:#fef9e7;color:#a14f10;font-weight:600}.container{align-items:center;background-color:wheat;display:flex;flex-direction:column;gap:16px;height:100vh;justify-content:center;margin:0;padding:0;position:relative;width:100vw}.logo{height:auto;margin-bottom:20px;width:200px}.intro-msg{font-size:18px;line-height:2em}.input-box{border:2px solid #ccc;border-radius:8px;font-size:18px;outline:none;padding:10px;text-align:center;width:280px}.button{background-color:#fee665;border:none;border-radius:8px;color:#000;cursor:pointer;font-size:18px;font-weight:700;margin-top:20px;padding:12px 24px}.button:disabled{background-color:#ccc;cursor:not-allowed}.error-msg{color:red;font-size:16px;margin-top:10px}.active-domains-section,.recent-codes-section{margin-top:20px;text-align:center}.section-title{color:#666;font-size:14px;margin-bottom:10px}.code-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:320px}.code-chip{background-color:#fff;border:1px solid #ddd;border-radius:20px;cursor:pointer;font-size:14px;padding:8px 16px;transition:all .2s ease}.code-chip:hover{background-color:#f5f5f5;border-color:#bbb}.code-chip.active-chip{background-color:#fff8dc;border-color:#fee665}.code-chip.active-chip:hover{background-color:#fff3c4}.language-selector-wrapper{bottom:32px;left:50%;position:absolute;transform:translateX(-50%)}.navbar{background-color:#fee665;border-bottom:1px solid #fdd835;box-shadow:0 2px 8px #00000014;height:64px;justify-content:space-between;padding:0 24px;position:sticky;top:0;width:100%;z-index:100}.nav-left,.navbar{align-items:center;display:flex}.nav-left{gap:8px}.nav-left .back-btn{align-items:center;border-radius:12px;color:#a14f10;display:flex;height:40px;justify-content:center;text-decoration:none;transition:all .2s ease;width:40px}.nav-left .back-btn:hover{background-color:#fdd835;color:#a14f10}.nav-left .back-btn:active{transform:scale(.95)}.nav-left .back-btn svg{height:24px;width:24px}.nav-left .title{color:#a14f10;font-size:1.125rem;font-weight:600;margin:0}.auth-button{align-items:center;background:none;border:none;border-radius:12px;color:#384344;cursor:pointer;display:flex;height:40px;justify-content:center;position:absolute;right:24px;transition:all .2s ease;width:40px}.auth-button:hover{background-color:#f5f9f8;color:#2f3e3f}.auth-button:active{transform:scale(.95)}.auth-button svg{height:20px;width:20px}.nav-right{align-items:center;display:flex;gap:8px}.nav-right .view-btn{align-items:center;background-color:#fdd835;border:none;border-radius:12px;color:#a14f10;cursor:pointer;display:flex;font-size:14px;font-weight:600;gap:6px;padding:8px 12px;transition:all .2s ease}.nav-right .view-btn:hover{background-color:#a14f10;color:#fff}.nav-right .view-btn:active{transform:scale(.95)}.nav-right .view-btn svg{flex-shrink:0}.empty-card{align-items:center;aspect-ratio:8/5;background-color:#fff;border:2px dashed #ccc;border-radius:12px;display:flex;justify-content:center;width:100%}.empty-text{color:#9cabab;font-size:16px;font-weight:500;text-align:center}.mqtt-preview-card{aspect-ratio:8/5;background:#fff;border-radius:12px;box-shadow:0 2px 10px #0000001a;display:flex;flex-direction:column;overflow:hidden;width:100%}.mqtt-preview-card .card-header{border-bottom:1px solid #eee;flex-shrink:0;padding:10px 12px}.mqtt-preview-card .card-header,.mqtt-preview-card .card-header .user-info{align-items:center;display:flex;gap:10px}.mqtt-preview-card .sticker-icon{background-color:#f5f9f8;border-radius:50%;flex-shrink:0;height:36px;object-fit:cover;width:36px}.mqtt-preview-card .user-name{color:#2f3e3f;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mqtt-preview-card .card-body{align-items:flex-start;background-color:#fff;display:flex;flex:1 1;flex-direction:column;justify-content:flex-start;min-height:0;overflow:hidden;padding:12px}.content-drawing{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.content-drawing .content-img{border-radius:8px;max-height:100%;max-width:100%;object-fit:contain}.content-text-only{align-items:flex-start;display:flex;justify-content:flex-start;width:100%}.content-text-only .content-text{word-wrap:break-word;color:#333;font-size:18px;line-height:1.6;margin:0;text-align:left;white-space:pre-wrap;width:100%;word-break:break-word}.content-image{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.content-image .content-img{border-radius:8px;max-height:100%;max-width:100%;object-fit:contain}.content-text-image{align-items:flex-start;display:flex;gap:20px;width:100%}.content-text-image .content-img{border-radius:8px;flex-shrink:0;max-height:250px;max-width:200px;object-fit:cover;width:40%}.content-text-image .content-text{word-wrap:break-word;color:#333;flex:1 1;font-size:16px;line-height:1.6;margin:0;text-align:left;white-space:pre-wrap;word-break:break-word}.content-sticker-only{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.content-sticker-only .sticker-large{height:200px;object-fit:contain;width:200px}.full-width{border-radius:8px;max-height:100%;max-width:100%;object-fit:contain}.content-text{color:#333;font-size:16px;line-height:1.6;margin:0;text-align:left}.progress-bar-container{background-color:#eee;flex-shrink:0;height:6px;width:100%}.progress-bar{height:100%;transition:width .1s linear,background .1s linear;will-change:width,background}.mqtt-preview-card .card-footer{border-top:1px solid #eee;flex-shrink:0;padding:0}.mqtt-preview-card .reaction-buttons{display:flex;width:100%}.mqtt-preview-card .reaction-btn{align-items:center;background:#0000;border:none;cursor:pointer;display:flex;flex:1 1;gap:4px;justify-content:center;padding:8px 4px;transition:all .2s ease}.mqtt-preview-card .reaction-btn:hover:not(:disabled){background:#0000000d}.mqtt-preview-card .reaction-btn:disabled{cursor:not-allowed;opacity:.5}.mqtt-preview-card .reaction-btn.selected{background:#fff4e6}.mqtt-preview-card .reaction-btn.selected .reaction-emoji{transform:scale(1.1)}.mqtt-preview-card .reaction-btn.selected .reaction-count,.mqtt-preview-card .reaction-btn.selected .reaction-label{color:#e67700;font-weight:600}.mqtt-preview-card .reaction-btn.selected:disabled{background:#f5f5f5}.mqtt-preview-card .reaction-btn.selected:disabled .reaction-count,.mqtt-preview-card .reaction-btn.selected:disabled .reaction-label{color:#999}.mqtt-preview-card .reaction-btn .reaction-emoji{font-size:16px;transition:transform .2s ease}.mqtt-preview-card .reaction-btn .reaction-label{color:#555;font-size:11px;font-weight:500;transition:color .2s ease}.mqtt-preview-card .reaction-btn .reaction-count{color:#333;font-size:12px;font-weight:700;transition:color .2s ease}.mqtt-preview-card .reaction-divider{align-self:center;background:#e0e0e0;height:24px;width:1px}.highlight-shadow{box-shadow:0 0 20px 5px #ff09;transition:box-shadow .3s ease}.my-card-preview{position:relative;width:100%}.action-buttons{display:flex;gap:4px;position:absolute;right:8px;top:8px;z-index:10}.action-btn{align-items:center;background:#0000;border:none;border-radius:6px;cursor:pointer;display:flex;height:28px;justify-content:center;padding:4px;transition:all .2s ease;width:28px}.action-btn img{height:20px;opacity:.5;transition:opacity .2s ease;width:20px}.action-btn:hover img{opacity:.8}.action-btn:active{transform:scale(.95)}.card-container{aspect-ratio:8/5;background:#fff;border-radius:12px;box-shadow:0 2px 10px #0000001a;display:flex;flex-direction:column;overflow:hidden}.card-header{border-bottom:1px solid #eee;flex-shrink:0;padding:10px 12px}.card-header .profile-container{align-items:center;display:flex;gap:10px}.card-header .preview-sticker-img{background:#f5f9f8;border-radius:50%;flex-shrink:0;height:36px;object-fit:cover;width:36px}.card-header .nickname{color:#2f3e3f;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card-body{align-items:flex-start;display:flex;flex:1 1;justify-content:flex-start;min-height:0;overflow:hidden;padding:12px}.card-body .content-image{border-radius:8px;height:100%;object-fit:contain;width:100%}.card-body .content-with-image{align-items:flex-start;display:flex;gap:12px;height:100%;width:100%}.card-body .content-with-image .attached-image{border-radius:8px;flex-shrink:0;height:100%;object-fit:cover;width:40%}.card-body .content-with-image .content-text{flex:1 1;font-size:13px;line-height:1.5}.card-body .content-text,.card-body .content-with-image .content-text{-webkit-line-clamp:4;-webkit-box-orient:vertical;color:#384344;display:-webkit-box;margin:0;overflow:hidden;text-align:left;word-break:break-word}.card-body .content-text{font-size:14px;line-height:1.6;width:100%}.card-body .content-text.only-text{padding:0 4px;text-align:left;width:100%}.card-body .content-text.empty{align-items:center;color:#9cabab;display:flex;font-style:italic;height:100%;justify-content:center;text-align:center}.card-footer{background:#f5f9f8;border-top:1px solid #eee;display:flex;flex-shrink:0;gap:12px;justify-content:flex-end;padding:8px 12px}.reaction-item{align-items:center;color:#384344;display:flex;font-size:12px;gap:4px}.modal-overlay{background:#00000080}.modal-content{background:#fff;border-radius:24px;box-shadow:0 4px 20px #0003;display:flex;flex-direction:column;height:80vh;max-height:700px;max-width:600px;min-height:500px;overflow:hidden;width:90%}.modal-header{align-items:center;background:#fee665;border-radius:24px 24px 0 0;display:flex;flex-shrink:0;justify-content:center;padding:16px 20px;position:relative}.modal-header h2{color:#333;font-size:1.1rem;font-weight:600;margin:0}.modal-header .close-btn{display:none}.sticker-selection{display:flex;flex:1 1;flex-direction:column;overflow:hidden;padding:20px}.sticker-selection .step-title{color:#333;font-size:16px;font-weight:700;margin-bottom:8px;text-align:center}.sticker-selection .step-desc{color:#666;font-size:14px;line-height:1.5;margin-bottom:16px;text-align:center}.sticker-selection .search-input-container{flex-shrink:0;margin-bottom:16px;position:relative;width:100%}.sticker-selection .search-input-container .search-input{background:#f8f8f8;border:1px solid #e0e0e0;border-radius:24px;font-size:14px;padding:12px 44px 12px 16px;width:100%}.sticker-selection .search-input-container .search-input:focus{background:#fff;border-color:#fee665;outline:none}.sticker-selection .search-input-container .search-icon{height:18px;pointer-events:none;position:absolute;right:16px;top:50%;transform:translateY(-50%);width:18px}.sticker-selection .search-input-container .clear-search-btn{align-items:center;background:#0000;border:none;color:#999;cursor:pointer;display:flex;height:24px;justify-content:center;padding:0;position:absolute;right:12px;top:50%;transform:translateY(-50%);transition:color .2s ease;width:24px}.sticker-selection .search-input-container .clear-search-btn:hover{color:#666}.sticker-selection .sticker-grid{grid-gap:8px;-webkit-overflow-scrolling:touch;align-content:start;display:grid;flex:1 1;gap:8px;grid-template-columns:repeat(4,1fr);margin-bottom:20px;overflow-x:hidden;overflow-y:auto;padding:4px}.sticker-selection .sticker-item{align-items:center;aspect-ratio:1/1;background:#f5f5f5;border:2px solid #0000;border-radius:10px;cursor:pointer;display:flex;flex-direction:column;justify-content:center;min-width:0;padding:6px;position:relative;transition:all .2s ease}.sticker-selection .sticker-item:hover{background:#eee}.sticker-selection .sticker-item:active{transform:scale(.95)}.sticker-selection .sticker-item.selected{background:#fff5f5;border-color:#f08080;box-shadow:0 2px 8px #f080804d}.sticker-selection .sticker-item.selected:before{border-left:6px solid #0000;border-right:6px solid #0000;border-top:8px solid #f08080;content:"";height:0;left:50%;position:absolute;top:4px;transform:translateX(-50%);width:0}.sticker-selection .sticker-item.selected p{color:#f08080;font-weight:600}.sticker-selection .sticker-item img{height:auto;max-height:60%;object-fit:contain;width:100%}.sticker-selection .sticker-item div{align-items:center;display:flex;flex:1 1;justify-content:center}.sticker-selection .sticker-item p{color:#666;font-size:11px;margin:4px 0 0;overflow:hidden;text-align:center;text-overflow:ellipsis;transition:color .2s ease;white-space:nowrap;width:100%}.sticker-selection .step-buttons{display:flex;flex-shrink:0;gap:12px;margin-top:auto}.sticker-selection .step-buttons .cancel-btn,.sticker-selection .step-buttons .next-btn{border-radius:24px;cursor:pointer;flex:1 1;font-size:15px;font-weight:600;padding:14px;transition:all .2s ease}.sticker-selection .step-buttons .cancel-btn{background:#fff;border:1px solid #e0e0e0;color:#666}.sticker-selection .step-buttons .cancel-btn:hover{background:#f5f5f5}.sticker-selection .step-buttons .cancel-btn:active{transform:scale(.98)}.sticker-selection .step-buttons .next-btn{background:#fee665;border:1px solid #f5c400;color:#333}.sticker-selection .step-buttons .next-btn:disabled{background:#fff;border:1px solid #e0e0e0;color:#ccc;cursor:not-allowed}.sticker-selection .step-buttons .next-btn:not(:disabled):hover{background:#ffd500}.sticker-selection .step-buttons .next-btn:not(:disabled):active{transform:scale(.98)}.content-input{-webkit-overflow-scrolling:touch;display:flex;flex:1 1;flex-direction:column;overflow-y:auto;padding:20px}.content-input .step-desc{color:#666;flex-shrink:0;font-size:14px;line-height:1.5;margin-bottom:16px;text-align:center}.content-input .toggle-container{background:#fff;border-radius:30px;box-shadow:0 4px 6px #0000001a;display:flex;flex-shrink:0;margin-bottom:16px;overflow:hidden;width:100%}.content-input .toggle-container .toggle-btn{background:#0000;border:none;color:#bbb;cursor:pointer;flex:1 1;font-size:16px;font-weight:700;padding:12px 16px;transition:all .3s ease}.content-input .toggle-container .toggle-btn.active{background:#fee665;border-radius:30px;color:#333;margin:4px}.content-input .card-container{background:#fff;border-radius:12px;box-shadow:0 2px 10px #0000001a;display:flex;flex:1 1;flex-direction:column;overflow:hidden}.content-input .card-container .card-header{border-bottom:1px solid #eee;padding:12px}.content-input .card-container .card-header .profile-container{align-items:center;display:flex;gap:12px;width:100%}.content-input .card-container .card-header .profile-container .profile-upload{border-radius:50%;cursor:pointer;flex-shrink:0;height:48px;overflow:hidden;width:48px}.content-input .card-container .card-header .profile-container .profile-upload .profile-img{height:100%;object-fit:cover;width:100%}.content-input .card-container .card-header .profile-container .profile-upload .profile-placeholder{align-items:center;background:#ddd;display:flex;height:100%;justify-content:center;width:100%}.content-input .card-container .card-header .profile-container .profile-upload .profile-placeholder span{color:#999;font-size:24px}.content-input .card-container .card-header .profile-container .profile-upload:hover .profile-placeholder{background:#ccc}.content-input .card-container .card-header .profile-container .nickname-input{border:1px solid #ddd;border-radius:24px;flex:1 1;font-size:16px;min-width:0;outline:none;padding:12px;transition:border-color .2s ease}.content-input .card-container .card-header .profile-container .nickname-input:focus{border-color:#007bff}.content-input .card-container .card-header .profile-container .nickname-input::placeholder{color:#aaa}.content-input .card-container .card-header .profile-container .preview-sticker-img{background:#ddd;border-radius:50%;flex-shrink:0;height:48px;object-fit:cover;overflow:hidden;width:48px}.content-input .card-container .card-body{align-items:stretch;display:flex;flex:1 1;flex-direction:column;min-height:0;overflow:hidden;padding:12px;position:relative}.content-input .card-container .card-body .input-container{border:1px solid #ddd;border-radius:12px;display:flex;flex:1 1;min-height:0;overflow:hidden;width:100%}.content-input .card-container .card-body .input-container .image-preview{border-right:1px solid #ddd;position:relative;width:40%}.content-input .card-container .card-body .input-container .image-preview .uploaded-img{height:100%;object-fit:cover;width:100%}.content-input .card-container .card-body .input-container .image-preview .remove-image-btn{align-items:center;background:#000;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:16px;height:24px;justify-content:center;left:8px;position:absolute;top:8px;width:24px}.content-input .card-container .card-body .input-container .image-preview .remove-image-btn:hover{background:#333}.content-input .card-container .card-body .input-container .text-input{border:none;flex:1 1;font-size:14px;height:100%;outline:none;padding:12px;resize:none;width:100%}.content-input .card-container .card-body .input-container .text-input::placeholder{color:#aaa}.content-input .card-container .card-body .input-container .text-input.with-image{width:60%}.content-input .card-container .card-body .image-upload-btn{align-items:center;background:#f8f9fa;border:2px dashed #dee2e6;border-radius:8px;cursor:pointer;display:flex;flex-shrink:0;gap:8px;justify-content:center;margin-top:12px;padding:12px 16px;transition:all .2s ease;width:100%}.content-input .card-container .card-body .image-upload-btn:hover{background:#e9ecef;border-color:#adb5bd}.content-input .card-container .card-body .image-upload-btn:active{transform:scale(.98)}.content-input .card-container .card-body .image-upload-btn .upload-icon{color:#6c757d;height:24px;width:24px}.content-input .card-container .card-body .image-upload-btn .upload-text{color:#495057;font-size:14px;font-weight:500}.content-input .card-container .card-body .drawing-container{display:flex;flex:1 1;flex-direction:column;min-height:0;width:100%}.content-input .card-container .card-body .drawing-container .toolbar{align-items:center;background:#f8f9fa;border-radius:8px;display:flex;flex-shrink:0;gap:8px;margin-top:12px;padding:8px;width:100%}.content-input .card-container .card-body .drawing-container .toolbar .palette-wrapper{position:relative}.content-input .card-container .card-body .drawing-container .toolbar .palette-wrapper .palette-btn{background:#fff;border:none;border-radius:8px;box-shadow:0 2px 4px #0000001a;cursor:pointer;height:40px;padding:4px;transition:all .2s ease;width:40px}.content-input .card-container .card-body .drawing-container .toolbar .palette-wrapper .palette-btn:hover{box-shadow:0 4px 8px #00000026;transform:translateY(-2px)}.content-input .card-container .card-body .drawing-container .toolbar .palette-wrapper .palette-btn .color-preview{border:3px solid #dee2e6;border-radius:50%;height:100%;transition:all .2s ease;width:100%}.content-input .card-container .card-body .drawing-container .toolbar .palette-wrapper .color-dropdown{grid-gap:8px;background:#fff;border-radius:12px;bottom:100%;box-shadow:0 4px 20px #00000026;display:grid;gap:8px;grid-template-columns:repeat(4,1fr);left:0;margin-bottom:8px;min-width:180px;padding:12px;position:absolute;z-index:100}.content-input .card-container .card-body .drawing-container .toolbar .palette-wrapper .color-dropdown .color-btn{border:2px solid #dee2e6;border-radius:50%;cursor:pointer;height:36px;transition:all .2s ease;width:36px}.content-input .card-container .card-body .drawing-container .toolbar .palette-wrapper .color-dropdown .color-btn:hover{box-shadow:0 2px 8px #0003;transform:scale(1.15)}.content-input .card-container .card-body .drawing-container .toolbar .palette-wrapper .color-dropdown .color-btn.active{border-color:#007bff;border-width:3px;box-shadow:0 0 0 2px #007bff4d}.content-input .card-container .card-body .drawing-container .toolbar .line-width-selector{align-items:center;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;display:flex;gap:4px;padding:6px 8px}.content-input .card-container .card-body .drawing-container .toolbar .line-width-selector .line-width-container{align-items:center;background:#fff;border:2px solid #dee2e6;border-radius:8px;cursor:pointer;display:flex;height:32px;justify-content:center;transition:all .2s ease;width:32px}.content-input .card-container .card-body .drawing-container .toolbar .line-width-selector .line-width-container:hover{background:#f8f9fa;border-color:#adb5bd}.content-input .card-container .card-body .drawing-container .toolbar .line-width-selector .line-width-container.active{background:#e7f3ff;border-color:#007bff;border-width:2px;box-shadow:0 0 0 2px #007bff33}.content-input .card-container .card-body .drawing-container .toolbar .line-width-selector .line-width-container .line-width-btn{background:#212529;border-radius:2px;transition:all .2s ease}.content-input .card-container .card-body .drawing-container .toolbar .history-buttons{display:flex;gap:4px;margin-left:auto}.content-input .card-container .card-body .drawing-container .toolbar .history-buttons .redo-btn,.content-input .card-container .card-body .drawing-container .toolbar .history-buttons .undo-btn{align-items:center;background:#fff;border:2px solid #dee2e6;border-radius:8px;box-shadow:0 2px 4px #0000001a;color:#495057;cursor:pointer;display:flex;height:36px;justify-content:center;padding:6px;transition:all .2s ease;width:36px}.content-input .card-container .card-body .drawing-container .toolbar .history-buttons .redo-btn svg,.content-input .card-container .card-body .drawing-container .toolbar .history-buttons .undo-btn svg{height:20px;width:20px}.content-input .card-container .card-body .drawing-container .toolbar .history-buttons .redo-btn:hover:not(:disabled),.content-input .card-container .card-body .drawing-container .toolbar .history-buttons .undo-btn:hover:not(:disabled){background:#e9ecef;border-color:#adb5bd}.content-input .card-container .card-body .drawing-container .toolbar .history-buttons .redo-btn:disabled,.content-input .card-container .card-body .drawing-container .toolbar .history-buttons .undo-btn:disabled{cursor:not-allowed;opacity:.4}.content-input .card-container .card-body .drawing-container .toolbar .clear-btn{align-items:center;background:#fff;border:2px solid #dee2e6;border-radius:8px;box-shadow:0 2px 4px #0000001a;color:#495057;cursor:pointer;display:flex;height:36px;justify-content:center;padding:6px;transition:all .2s ease;width:36px}.content-input .card-container .card-body .drawing-container .toolbar .clear-btn svg{height:24px;width:24px}.content-input .card-container .card-body .drawing-container .toolbar .clear-btn:hover{background:#dc3545;border-color:#dc3545;box-shadow:0 4px 8px #dc35454d;color:#fff;transform:translateY(-1px)}.content-input .card-container .card-body .drawing-container .toolbar .clear-btn:active{transform:translateY(0)}.content-input .card-container .card-body .drawing-container .drawing-canvas{background:#fff;border:1px solid #ddd;border-radius:12px;cursor:crosshair;flex:1 1;min-height:0;width:100%}.modal-footer{display:flex;flex-shrink:0;gap:12px;padding:20px}.modal-footer button{border:none;border-radius:8px;cursor:pointer;flex:1 1;font-size:16px;font-weight:700;padding:14px;transition:all .2s ease}.modal-footer button:first-child{background:#f0f0f0}.modal-footer button:first-child:hover{background:#e0e0e0}.modal-footer button:first-child:active{transform:scale(.98)}.modal-footer button.submit-btn{background:#fee665;color:#333}.modal-footer button.submit-btn:disabled{background:#ddd;color:#999;cursor:not-allowed}.modal-footer button.submit-btn:not(:disabled):hover{background:#ffd500}.modal-footer button.submit-btn:not(:disabled):active{transform:scale(.98)}.warning-modal-overlay{align-items:center;background:#0009;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:2000}.warning-modal{animation:warningModalIn .2s ease-out;background:#fff;border-radius:16px;box-shadow:0 8px 32px #0003;max-width:320px;padding:32px;text-align:center;width:90%}.warning-modal .warning-modal-icon{font-size:48px;margin-bottom:16px}.warning-modal .warning-modal-text{color:#333;font-size:16px;font-weight:500;line-height:1.5;margin:0 0 24px}.warning-modal .warning-modal-btn{background:#fee665;border:none;border-radius:8px;color:#333;cursor:pointer;font-size:16px;font-weight:600;padding:14px 24px;transition:all .2s ease;width:100%}.warning-modal .warning-modal-btn:hover{background:#fdd835}.warning-modal .warning-modal-btn:active{transform:scale(.98)}@keyframes warningModalIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.modal-overlay{align-items:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0009;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:1000}.popup-content{background:#fff;border-radius:12px;box-shadow:0 8px 32px #00000026;max-width:400px;padding:32px;text-align:left}.popup-title{color:#2f3e3f;font-size:20px;font-weight:600;margin-bottom:16px;text-align:center}.popup-description{color:#384344;font-size:16px;line-height:1.6;margin:24px 0;text-align:center}.popup-actions{display:flex;gap:12px;justify-content:center;margin-top:32px}.cancel-btn{background:#fff;border:2px solid #cdd7d4;border-radius:12px;color:#384344;cursor:pointer;font-size:14px;font-weight:500;padding:12px 24px;transition:all .2s ease}.cancel-btn:hover{background:#f5f9f8;border-color:#9cabab}.confirm-btn{background:#dc3545;border:none;border-radius:12px;box-shadow:0 2px 4px #dc354533;color:#fff;cursor:pointer;font-size:14px;font-weight:500;padding:12px 24px;transition:all .2s ease}.confirm-btn:hover{background:#b02a37;box-shadow:0 4px 8px #dc35454d;transform:translateY(-2px)}.confirm-btn:active{box-shadow:0 2px 4px #dc354533;transform:translateY(0)}.wall-page{background-color:#f5f5f5;display:flex;flex-direction:column;min-height:100vh}.content-container{display:flex;flex:1 1;flex-direction:column;gap:24px;margin:0 auto;max-width:1200px;padding:24px;width:100%}.my-stickers-section{width:100%}.my-stickers-section h2{color:#2f3e3f;font-size:1.25rem;font-weight:600;margin:0 0 16px}.my-stickers-section .sticker-container{background:linear-gradient(180deg,#fee665,#ffd665);border:none;border-radius:32px;box-shadow:0 1px 2px #37414b40;overflow:hidden;padding:16px 24px;position:relative;text-align:center;transition:all .2s ease}.my-stickers-section .sticker-container.top-button{margin-bottom:16px}.my-stickers-section .sticker-container:after{animation:shimmer 4s infinite;background:linear-gradient(90deg,#0000,#fff6,#0000);content:"";height:100%;left:-100%;position:absolute;top:0;width:50%}@keyframes shimmer{0%{left:-100%}50%,to{left:150%}}.my-stickers-section .sticker-container:hover{background:linear-gradient(180deg,#ffd665,#ffc94d);box-shadow:0 4px 12px #37414b4d;transform:translateY(-2px)}.my-stickers-section .sticker-container .add-sticker-btn{align-items:center;background-color:#0000;border:none;color:#a14f10;cursor:pointer;display:flex;font-size:16px;font-weight:600;gap:8px;justify-content:center;padding:8px 16px;position:relative;width:100%;z-index:1}.my-stickers-section .my-stickers-list{display:flex;flex-direction:column;gap:12px;width:100%}.my-stickers-section .empty-stickers-msg{background:#fff;border-radius:12px;color:#4e6364;font-size:14px;margin:0;padding:32px 16px;text-align:center}.wall-footer{color:#9cabab;font-size:13px;padding:24px 16px;text-align:center}.wall-footer p{margin:0}.wall-footer strong{color:#4e6364;font-weight:600}.wall-footer .tagline{color:#cdd7d4;font-size:12px;margin-top:4px}.screen-effect{height:100%;left:0;overflow:hidden;pointer-events:none;position:absolute;top:0;width:100%;z-index:50}.particle{position:absolute;top:-20px}.particle--snow{animation:snowFall linear infinite;background:#fff;border-radius:50%;box-shadow:0 0 10px #fffc}@keyframes snowFall{0%{opacity:1;transform:translateY(-10px) rotate(0deg)}to{opacity:.3;transform:translateY(100vh) rotate(2turn)}}.screen-effect--snow .particle:nth-child(odd){animation:snowFallSway linear infinite}@keyframes snowFallSway{0%{opacity:1;transform:translateY(-10px) translateX(0) rotate(0deg)}25%{transform:translateY(25vh) translateX(15px) rotate(180deg)}50%{transform:translateY(50vh) translateX(-10px) rotate(1turn)}75%{transform:translateY(75vh) translateX(20px) rotate(540deg)}to{opacity:.3;transform:translateY(100vh) translateX(0) rotate(2turn)}}.particle--rain{animation:rainFall linear infinite;background:linear-gradient(180deg,#aec2e0cc,#aec2e033);border-radius:2px}@keyframes rainFall{0%{opacity:0;transform:translateY(-20px) translateX(0)}10%{opacity:1}90%{opacity:1}to{opacity:0;transform:translateY(100vh) translateX(-30px)}}.particle--confetti{animation:confettiFall linear infinite;border-radius:2px}@keyframes confettiFall{0%{opacity:1;transform:translateY(-10px) rotate(0deg) scale(1)}25%{transform:translateY(25vh) rotate(180deg) translateX(30px) scale(.9)}50%{transform:translateY(50vh) rotate(1turn) translateX(-20px) scale(1.1)}75%{transform:translateY(75vh) rotate(540deg) translateX(40px) scale(.8)}to{opacity:0;transform:translateY(100vh) rotate(2turn) translateX(0) scale(1)}}.particle--firefly{animation:fireflyFloat ease-in-out infinite;background:radial-gradient(circle,#ffa 0,#ff0 30%,#0000 70%);border-radius:50%;box-shadow:0 0 15px 5px #ffff6499}@keyframes fireflyFloat{0%,to{opacity:.3;transform:translate(0) scale(1)}25%{opacity:1;transform:translate(30px,-50px) scale(1.2)}50%{opacity:.5;transform:translate(-20px,-30px) scale(.8)}75%{opacity:.9;transform:translate(40px,20px) scale(1.1)}}.screen-effect--firefly .particle{bottom:10%;top:auto}.screen-effect--firefly .particle:nth-child(3n){bottom:30%}.screen-effect--firefly .particle:nth-child(3n+1){bottom:50%}.screen-effect--firefly .particle:nth-child(3n+2){bottom:70%}.particle--bubbles{animation:bubbleFloat ease-in-out infinite;background:radial-gradient(circle at 30% 30%,#87cefae6,#64b4ff80 40%,#4696dc4d 70%,#0000 100%);border:2px solid #64b4ff99;border-radius:50%;box-shadow:inset 0 -5px 10px #ffffff80,inset 5px 5px 10px #fff6,0 2px 10px #6496ff4d}@keyframes bubbleFloat{0%{opacity:0;transform:translateY(0) translateX(0) scale(.5)}10%{opacity:.8;transform:translateY(-10vh) translateX(10px) scale(.8)}50%{opacity:.9;transform:translateY(-50vh) translateX(-20px) scale(1)}90%{opacity:.6}to{opacity:0;transform:translateY(-100vh) translateX(15px) scale(1.1)}}.screen-effect--bubbles .particle{bottom:0;top:auto!important}.particle--leaves{animation:leafFall linear infinite;border-radius:50% 0 50% 0}@keyframes leafFall{0%{opacity:1;transform:translateY(-10px) rotate(0deg) translateX(0)}20%{transform:translateY(20vh) rotate(72deg) translateX(50px)}40%{transform:translateY(40vh) rotate(144deg) translateX(-30px)}60%{transform:translateY(60vh) rotate(216deg) translateX(70px)}80%{transform:translateY(80vh) rotate(288deg) translateX(-40px)}to{opacity:.3;transform:translateY(100vh) rotate(1turn) translateX(20px)}}.card-preview-overlay{align-items:center;display:flex;justify-content:center;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:1000}.card-preview-wrapper.anim-scale{animation:scaleIn .4s cubic-bezier(.34,1.56,.64,1) forwards}.card-preview-wrapper.anim-scale.closing{animation:scaleOut .4s cubic-bezier(.5,0,.75,0) forwards}@keyframes scaleIn{0%{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}@keyframes scaleOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.3)}}.card-preview-wrapper.anim-fade-slide{animation:fadeSlideIn .5s ease-out forwards}.card-preview-wrapper.anim-fade-slide.closing{animation:fadeSlideOut .4s ease-in forwards}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(60px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeSlideOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(60px)}}.card-preview-wrapper.anim-zoom-bounce{animation:zoomBounceIn .5s cubic-bezier(.34,1.56,.64,1) forwards}.card-preview-wrapper.anim-zoom-bounce.closing{animation:zoomBounceOut .35s cubic-bezier(.4,0,.2,1) forwards}@keyframes zoomBounceIn{0%{opacity:0;transform:scale(.3)}40%{opacity:1;transform:scale(1.08)}70%{transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes zoomBounceOut{0%{opacity:1;transform:scale(1)}30%{opacity:1;transform:scale(1.03)}to{opacity:0;transform:scale(.5)}}.card-preview-wrapper.anim-flip{animation:flipIn .6s ease-out forwards}.card-preview-wrapper.anim-flip.closing{animation:flipOut .4s ease-in forwards}@keyframes flipIn{0%{opacity:0;transform:perspective(1000px) rotateX(-90deg)}to{opacity:1;transform:perspective(1000px) rotateX(0)}}@keyframes flipOut{0%{opacity:1;transform:perspective(1000px) rotateX(0)}to{opacity:0;transform:perspective(1000px) rotateX(90deg)}}.card-preview-wrapper.anim-blur-fade{animation:blurFadeIn .5s ease-out forwards}.card-preview-wrapper.anim-blur-fade.closing{animation:blurFadeOut .4s ease-in forwards}@keyframes blurFadeIn{0%{filter:blur(20px);opacity:0;transform:scale(1.1)}to{filter:blur(0);opacity:1;transform:scale(1)}}@keyframes blurFadeOut{0%{filter:blur(0);opacity:1;transform:scale(1)}to{filter:blur(20px);opacity:0;transform:scale(.9)}}.card-preview-wrapper.anim-swing{animation:swingIn .7s ease-out forwards;transform-origin:top center}.card-preview-wrapper.anim-swing.closing{animation:swingOut .4s ease-in forwards;transform-origin:top center}@keyframes swingIn{0%{opacity:0;transform:rotateX(-100deg)}40%{transform:rotateX(30deg)}60%{transform:rotateX(-10deg)}80%{transform:rotateX(5deg)}to{opacity:1;transform:rotateX(0)}}@keyframes swingOut{0%{opacity:1;transform:rotateX(0)}to{opacity:0;transform:rotateX(-100deg)}}.card-preview-wrapper{border-radius:16px;position:relative}.card-preview-wrapper.highlight-shadow .card-preview{animation:glow-pulse 2s ease-in-out infinite}@keyframes glow-pulse{0%,to{box-shadow:0 0 30px 8px #ffd70066,0 0 60px 15px #ffb40033}50%{box-shadow:0 0 40px 12px #ffd70080,0 0 80px 20px #ffb4004d}}.card-preview{background:#fff;border-radius:16px;box-shadow:0 4px 20px #00000026;max-height:80vh;max-width:70vw;overflow:hidden}.card-preview .card-header{align-items:center;background:#fafafa;border-bottom:1px solid #eee;display:flex;gap:12px;padding:16px 20px}.card-preview .sticker-img{background-color:#fff;border:2px solid #e0e0e0;border-radius:50%;object-fit:cover}.card-preview .user-name{color:#333;flex-grow:1;font-weight:600;text-align:start}.card-preview .card-body{align-items:flex-start;background:#fff;box-sizing:border-box;display:flex;flex-direction:column;justify-content:flex-start;max-height:500px;max-width:65vw;min-height:250px;padding:12px;width:600px}.card-preview .content-drawing{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.card-preview .drawing-img{border-radius:8px;max-height:450px;max-width:100%;object-fit:contain}.card-preview .content-text-only{align-items:flex-start;display:flex;justify-content:flex-start;width:100%}.card-preview .content-text-only .content-text{width:100%}.card-preview .content-image-only{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.card-preview .content-image-only .content-img{border-radius:8px;display:block;height:auto;max-height:450px;max-width:100%;object-fit:contain;width:auto}.card-preview .content-mixed{align-items:flex-start;display:flex;gap:20px;width:100%}.card-preview .content-image-wrapper{flex-shrink:0;max-width:200px;width:40%}.card-preview .content-mixed .content-img{border-radius:8px;max-height:350px;object-fit:cover;width:100%}.card-preview .content-mixed .content-text{flex:1 1}.card-preview .content-text{word-wrap:break-word;color:#333;line-height:1.6;margin:0;text-align:left;white-space:pre-wrap;word-break:break-word}.card-preview .progress-bar-container{background-color:#eee;height:6px;width:100%}.card-preview .progress-bar{height:100%;transition:width .1s linear,background .3s ease}.card-preview .card-footer{background:#fafafa;border-top:1px solid #eee;padding:8px 12px}.card-preview .reaction-buttons{display:flex;gap:24px;justify-content:center;width:100%}.card-preview .reaction-item{-webkit-tap-highlight-color:rgba(0,0,0,0);align-items:center;background:#f9fafb;border:2px solid #e5e7eb;border-radius:999px;color:#6b7280;cursor:pointer;display:inline-flex;gap:8px;height:44px;justify-content:center;padding:0 18px;transition:background .2s ease,border-color .2s ease,transform .16s ease,box-shadow .2s ease,color .2s ease;-webkit-user-select:none;user-select:none}.card-preview .reaction-item:hover:not(:disabled){background:#f3f4f6;border-color:#d1d5db;transform:translateY(-2px)}.card-preview .reaction-item:active:not(:disabled){transform:translateY(0) scale(.98)}.card-preview .reaction-item[data-type=thumb_up]:hover:not(:disabled):not(.selected){border-color:#2563eb80;box-shadow:0 6px 16px -6px #2563eb59}.card-preview .reaction-item[data-type=thumb_up].selected{background:linear-gradient(135deg,#2563eb,#60a5fa);border-color:#2563eb;box-shadow:0 8px 20px -6px #2563eb80;color:#fff}.card-preview .reaction-item[data-type=smile]:hover:not(:disabled):not(.selected){border-color:#f59e0b80;box-shadow:0 6px 16px -6px #fb923c59}.card-preview .reaction-item[data-type=smile].selected{background:linear-gradient(135deg,#f59e0b,#fb923c);border-color:#f59e0b;box-shadow:0 8px 20px -6px #f59e0b80;color:#fff}.card-preview .reaction-item[data-type=like]:hover:not(:disabled):not(.selected){border-color:#f43f5e80;box-shadow:0 6px 16px -6px #f43f5e59}.card-preview .reaction-item[data-type=like].selected{background:linear-gradient(135deg,#f43f5e,#fb7185);border-color:#f43f5e;box-shadow:0 8px 20px -6px #f43f5e80;color:#fff}.card-preview .reaction-item.selected{animation:rx-pop .22s cubic-bezier(.2,.8,.2,1);transform:translateY(-2px)}.card-preview .reaction-item.selected .reaction-emoji{filter:drop-shadow(0 2px 4px rgba(0,0,0,.2));transform:scale(1.15)}.card-preview .reaction-item.selected .reaction-label{color:#fff;font-weight:700}.card-preview .reaction-item.selected .reaction-count{-webkit-backdrop-filter:saturate(140%);backdrop-filter:saturate(140%);background:#ffffff40;border-radius:999px;color:#fff;font-weight:700;padding:2px 10px}.card-preview .reaction-item.selected:hover:not(:disabled){transform:translateY(-3px)}@keyframes rx-pop{0%{transform:translateY(-2px) scale(.95)}60%{transform:translateY(-2px) scale(1.08)}to{transform:translateY(-2px) scale(1)}}.card-preview .reaction-item:disabled{box-shadow:none;cursor:default;opacity:.6;transform:none}.card-preview .reaction-item:disabled.selected{background:linear-gradient(135deg,#9ca3af,#d1d5db);border-color:#9ca3af}.card-preview .reaction-item:disabled.selected .reaction-count,.card-preview .reaction-item:disabled.selected .reaction-label{color:#fff}.card-preview .reaction-item.highlight.react-scale{animation:reactScale .5s ease-out}@keyframes reactScale{0%{transform:scale(1)}50%{transform:scale(1.3)}to{transform:scale(1)}}.card-preview .reaction-item.highlight.react-bounce{animation:reactBounce .6s cubic-bezier(.68,-.55,.265,1.55)}@keyframes reactBounce{0%{transform:scale(1)}30%{transform:scale(1.4)}50%{transform:scale(.9)}70%{transform:scale(1.2)}to{transform:scale(1)}}.card-preview .reaction-item.highlight.react-shake{animation:reactShake .5s ease-out}@keyframes reactShake{0%,to{transform:translateX(0) rotate(0)}20%{transform:translateX(-5px) rotate(-5deg)}40%{transform:translateX(5px) rotate(5deg)}60%{transform:translateX(-5px) rotate(-5deg)}80%{transform:translateX(5px) rotate(5deg)}}.card-preview .reaction-item.highlight.react-glow{animation:reactGlow .6s ease-out}@keyframes reactGlow{0%{box-shadow:0 0 0 #ffc80000;transform:scale(1)}50%{box-shadow:0 0 20px #ffc800cc;transform:scale(1.2)}to{box-shadow:0 0 0 #ffc80000;transform:scale(1)}}.card-preview .reaction-item.highlight.react-heartbeat{animation:reactHeartbeat .6s ease-out}@keyframes reactHeartbeat{0%{transform:scale(1)}14%{transform:scale(1.3)}28%{transform:scale(1)}42%{transform:scale(1.3)}70%{transform:scale(1)}}.card-preview .reaction-item.highlight.react-pop{animation:reactPop .4s cubic-bezier(.175,.885,.32,1.275)}@keyframes reactPop{0%{transform:scale(1)}50%{transform:scale(1.5)}to{transform:scale(1)}}.card-preview .reaction-item.highlight{transform:scale(1.15)}.card-preview .reaction-emoji{font-size:18px}.card-preview .reaction-label{color:#666;font-size:13px;font-weight:500}.card-preview .reaction-count{color:#333;font-size:14px;font-weight:700}.card-preview-wrapper .close-btn{align-items:center;background:linear-gradient(135deg,#ff6b6b,#ee5a5a);border:none;border-radius:50%;box-shadow:0 4px 12px #ee5a5a66;color:#fff;cursor:pointer;display:flex;font-size:18px;height:40px;justify-content:center;position:absolute;right:-14px;top:-14px;transition:all .3s ease;width:40px}.card-preview-wrapper .close-btn:hover{background:linear-gradient(135deg,#ff5252,#e04545);box-shadow:0 6px 16px #ee5a5a80;transform:scale(1.15) rotate(90deg)}.wall-cards{height:100%;position:relative;width:100%}.sticker-card{background:#0000;cursor:pointer;position:absolute;transform:translate(-50%,-50%)}.sticker-card img{object-fit:cover}.sticker-img-wrapper{overflow:hidden;transition:filter .3s ease,opacity .2s ease}.sticker-img-wrapper.glow{animation:sticker-glow 1.5s ease-in-out infinite;filter:drop-shadow(0 0 12px rgba(255,215,0,.8)) drop-shadow(0 0 25px rgba(255,180,0,.5))}.wall-cards.interactive .sticker-card.clickable{transition:transform .2s ease}.wall-cards.interactive .sticker-card.clickable:hover{transform:translate(-50%,-50%) scale(1.15)}.wall-cards.interactive .sticker-card.clickable:hover .sticker-img-wrapper{filter:drop-shadow(0 0 8px rgba(0,123,255,.5))}.wall-cards.interactive .sticker-card.clickable:active{transform:translate(-50%,-50%) scale(.95)}.loading,.no-content{bottom:10px;color:gray;left:50%;position:absolute;transform:translateX(-50%)}.empty-content{color:#999;font-size:16px;left:50%;position:absolute;text-align:center;top:50%;transform:translate(-50%,-50%)}.empty-content p{background-color:#fffc;border-radius:8px;box-shadow:0 2px 8px #0000001a;margin:0;padding:20px}.sticker-card.highlight-shadow img{animation:sticker-glow 1.5s ease-in-out infinite;filter:drop-shadow(0 0 12px rgba(255,215,0,.8)) drop-shadow(0 0 25px rgba(255,180,0,.5));transition:filter .3s ease}@keyframes sticker-glow{0%,to{filter:drop-shadow(0 0 12px rgba(255,215,0,.8)) drop-shadow(0 0 25px rgba(255,180,0,.5))}50%{filter:drop-shadow(0 0 18px rgb(255,215,0)) drop-shadow(0 0 35px rgba(255,180,0,.7))}}@keyframes sticker-pop{0%{filter:blur(4px);opacity:0;transform:translate(-50%,-50%) scale(1) rotate(0deg)}20%{filter:blur(0);opacity:1;transform:translate(-50%,-50%) scale(3) rotate(1turn)}80%{opacity:1;transform:translate(-50%,-50%) scale(3) rotate(540deg)}to{filter:blur(0);opacity:1;transform:translate(-50%,-50%) scale(1) rotate(2turn)}}.sticker-card.animate-insert{animation:sticker-pop 2s cubic-bezier(.23,1.02,.35,1) both;z-index:10}.floating-reaction-emoji{animation:floatingEmoji .8s ease-out forwards;font-size:32px;left:50%;pointer-events:none;position:absolute;top:50%;z-index:100}@keyframes floatingEmoji{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}20%{opacity:1;transform:translate(-50%,-80%) scale(1.2)}to{opacity:0;transform:translate(-50%,-150%) scale(1)}}.view-page{background-color:#000;display:flex;flex-direction:column;height:100vh;overflow:hidden;width:100vw}.view-page.landscape .view-container{height:100vw;left:50%;margin-left:-50vh;margin-top:-50vw;position:absolute;top:50%;transform:rotate(90deg);transform-origin:center center;width:100vh}.view-page .view-container{background-color:#f5f9f8;display:flex;flex-direction:column;height:100%;position:relative;width:100%}.view-page .back-button{align-items:center;background:linear-gradient(135deg,#fff4b8,#fee665 50%,#ffc107);border:none;border-radius:24px;box-shadow:0 4px 14px #ffc10773,0 2px 6px #ffd66659,inset 0 1px 0 #fff9;color:#5d4000;cursor:pointer;display:inline-flex;font-size:14px;font-weight:600;gap:8px;left:16px;padding:12px 20px;position:absolute;text-decoration:none;top:16px;transition:all .2s ease-in-out;will-change:transform,box-shadow;z-index:100}.view-page .back-button:hover{box-shadow:0 6px 20px #ffc1078c,0 4px 10px #ffd66673,inset 0 1px 0 #ffffffb3;filter:brightness(1.02);transform:translateY(-2px)}.view-page .back-button:active{box-shadow:0 2px 8px #ffc10759,0 1px 3px #ffd66640,inset 0 2px 4px #00000014;transform:scale(.96) translateY(0);transition:all .1s ease-in-out}.view-page .back-button svg{color:#8b6914;flex-shrink:0}.view-page .preview-top{align-items:center;display:flex;flex-shrink:0;gap:20px;padding:0 20px}.view-page .preview-top .logo-container{align-items:center;display:flex;justify-content:center}.view-page .preview-top .logo-container img{object-fit:contain}.view-page .preview-top .text-container{display:flex;flex:1 1;flex-direction:column;gap:4px}.view-page .preview-top .text-container .title{font-weight:700}.view-page .preview-top .text-container .description{font-weight:400}.view-page .preview-top .qr-domain-container{align-items:center;display:flex;gap:16px}.view-page .preview-top .qr-domain-container .domain-container{line-height:1.4;text-align:right}.view-page .preview-top .qr-domain-container .qr-container{height:80px;object-fit:contain;width:80px}.view-page .preview-content{align-items:center;display:flex;flex:1 1;justify-content:center;overflow:hidden;position:relative}.view-page .preview-content .waiting-screen{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.view-page .preview-content .waiting-screen .waiting-text{animation:pulse 2s ease-in-out infinite;color:#666;font-size:24px;text-align:center}@keyframes pulse{0%,to{opacity:.6}50%{opacity:1}}.mqtt-test{margin:0 auto;max-width:1200px;padding:20px}.mqtt-test h1{margin-bottom:30px;text-align:center}.mqtt-test .status{background:#f5f5f5;border-radius:8px;margin-bottom:20px;padding:20px}.mqtt-test .status h2{margin-top:0}.mqtt-test .status .connection-status{font-size:18px;font-weight:700;margin:10px 0}.mqtt-test .status .connection-status.connected{color:#4caf50}.mqtt-test .status .connection-status.disconnected{color:#f44336}.mqtt-test .status p{color:#666;margin:5px 0}.mqtt-test .controls{background:#fff;border:1px solid #ddd;border-radius:8px;margin-bottom:20px;padding:20px}.mqtt-test .controls h2{margin-top:0}.mqtt-test .controls .message-control,.mqtt-test .controls .topic-control{display:flex;gap:10px;margin-bottom:15px}.mqtt-test .controls .message-control input,.mqtt-test .controls .topic-control input{border:1px solid #ddd;border-radius:4px;flex:1 1;font-size:14px;padding:10px}.mqtt-test .controls .message-control button,.mqtt-test .controls .topic-control button{background:#2196f3;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:14px;padding:10px 20px;white-space:nowrap}.mqtt-test .controls .message-control button:hover:not(:disabled),.mqtt-test .controls .topic-control button:hover:not(:disabled){background:#1976d2}.mqtt-test .controls .message-control button:disabled,.mqtt-test .controls .topic-control button:disabled{background:#ccc;cursor:not-allowed}.mqtt-test .messages{background:#fff;border:1px solid #ddd;border-radius:8px;padding:20px}.mqtt-test .messages h2{margin-top:0}.mqtt-test .messages .message-list{background:#fafafa;border:1px solid #eee;border-radius:4px;max-height:400px;overflow-y:auto;padding:10px}.mqtt-test .messages .message-list .message{border-radius:4px;font-family:monospace;font-size:13px;margin-bottom:8px;padding:8px}.mqtt-test .messages .message-list .message.system{background:#e3f2fd;color:#1565c0}.mqtt-test .messages .message-list .message.sent{background:#e8f5e9;color:#2e7d32}.mqtt-test .messages .message-list .message.received{background:#fff3e0;color:#e65100}.mqtt-test .messages .message-list .message.error{background:#ffebee;color:#c62828}.mqtt-test .messages .message-list .message .timestamp{color:#666;margin-right:10px}*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.App{min-height:100vh}
/*# sourceMappingURL=main.220dac39.css.map*/