body{background-color:#f5f5f5;font-family:Gowun Dodum,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif}#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-flag{font-size:18px;line-height:1}.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:6px;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:160px;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{align-items:center;background:#0000;border:none;color:#384344;cursor:pointer;display:flex;font-size:14px;font-weight:400;gap:8px;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}.wall-password-overlay{align-items:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0f172a73;display:flex;inset:0;justify-content:center;padding:20px;position:fixed;z-index:1000}.wall-password-modal{background:#fff;border-radius:24px;box-shadow:0 24px 60px #0f172a40;max-width:400px;padding:26px 22px 22px;width:100%}.wpm-title{color:#0f172a;font-size:19px;font-weight:800;letter-spacing:-.02em;margin:0 0 6px}.wpm-desc{color:#64748b;font-size:14px;line-height:1.55;margin:0 0 20px;word-break:keep-all}.wpm-field{margin-bottom:14px}.wpm-label{color:#334155;display:block;font-size:13px;font-weight:700;margin:0 2px 6px}.wpm-domain{color:#0f172a;font-size:15px;font-weight:700;padding:13px 16px;word-break:break-all}.wpm-domain,.wpm-input-wrap{background:#f8fafc;border:1px solid #e2e8f0;border-radius:14px}.wpm-input-wrap{align-items:center;display:flex;transition:border-color .16s ease,box-shadow .16s ease}.wpm-input-wrap:focus-within{border-color:#2563eb;box-shadow:0 0 0 3px #2563eb1f}.wpm-input{background:#0000;border:none;color:#0f172a;flex:1 1;font-size:15px;font-weight:600;min-width:0;outline:none;padding:13px 0 13px 16px}.wpm-input::placeholder{color:#9aa2ad;font-weight:500}.wpm-eye-btn{align-items:center;background:none;border:none;color:#94a3b8;cursor:pointer;display:flex;flex-shrink:0;height:44px;justify-content:center;width:44px}.wpm-eye-btn:hover{color:#475569}.wpm-error{color:#dc2626;font-size:13px;font-weight:700;margin:0 2px 4px}.wpm-actions{display:flex;gap:10px;margin-top:18px}.wpm-actions button{border-radius:999px;cursor:pointer;flex:1 1;font-size:15px;font-weight:800;padding:14px 0;transition:all .16s ease}.wpm-cancel-btn{background:#f1f5f9;border:none;color:#334155}.wpm-cancel-btn:hover{background:#e2e8f0}.wpm-enter-btn{background:#2563eb;border:none;box-shadow:0 7px 14px #2563eb40;color:#fff}.wpm-enter-btn:hover:not(:disabled){background:#1d4ed8}.wpm-enter-btn:disabled{background:#cbd5e1;box-shadow:none;color:#f8fafc;cursor:not-allowed}.wall-grid-overlay{-webkit-overflow-scrolling:touch;background:#f7f8fb;inset:0;overflow-y:auto;position:fixed;z-index:500}.wgo-header{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:#f7f8fbe0;border-bottom:1px solid #eef0f4;gap:12px;padding:calc(14px + env(safe-area-inset-top)) 16px 14px;position:sticky;top:0;z-index:10}.wgo-back-btn,.wgo-header{align-items:center;display:flex}.wgo-back-btn{background:#fff;border:1px solid #e2e8f0;border-radius:999px;box-shadow:0 4px 10px #0f172a0f;color:#0f172a;cursor:pointer;flex-shrink:0;height:38px;justify-content:center;transition:all .16s ease;width:38px}.wgo-back-btn:active,.wgo-back-btn:hover{border-color:#c7d7f5;color:#2563eb}.wgo-title{color:#0f172a;font-size:18px;font-weight:800;letter-spacing:-.02em;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wgo-body{margin:0 auto;max-width:520px;padding:18px 20px calc(32px + env(safe-area-inset-bottom))}.wgo-grid{grid-gap:14px;display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}.wgo-card{background:#fff;border:1px solid #eef0f4;border-radius:20px;box-shadow:0 8px 20px #0f172a0d;cursor:pointer;display:flex;flex-direction:column;padding:10px 10px 14px;text-align:left;transition:all .18s ease}.wgo-card:active,.wgo-card:hover{border-color:#c7d7f5;box-shadow:0 12px 26px #2563eb1f;transform:translateY(-1px)}.wgo-card-thumb{aspect-ratio:4/3;border:1px solid #0f172a0f;border-radius:14px;margin-bottom:10px;position:relative;width:100%}.wgo-card-lock{align-items:center;background:#ef4444;border-radius:999px;color:#fff;display:flex;height:24px;justify-content:center;position:absolute;right:8px;top:8px;width:24px}.wgo-card-content{display:flex;flex-direction:column;gap:3px;min-width:0;padding:0 4px}.wgo-card-title{color:#0f172a;font-size:15px;font-weight:800;letter-spacing:-.02em;line-height:1.3}.wgo-card-domain,.wgo-card-title{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wgo-card-domain{color:#64748b;font-size:12px}.wgo-card-posts{align-items:center;align-self:flex-start;background:#f1f5f9;border-radius:999px;color:#334155;display:inline-flex;font-size:12px;font-weight:700;gap:4px;margin-top:6px;padding:4px 10px}.wgo-loading{color:#2563eb;display:flex;justify-content:center;padding:22px 0}.wgo-spinner{animation:wgo-spin .9s linear infinite}@keyframes wgo-spin{to{transform:rotate(1turn)}}.wgo-empty,.wgo-end{color:#94a3b8;font-size:13px;margin:0;padding:20px 0 6px;text-align:center}.wgo-sentinel{height:1px}.home-page{background-image:radial-gradient(#2563eb12 1px,#0000 1.5px),linear-gradient(180deg,#dfe9f8,#eef3fb 22%,#f7f8fb 45%);background-size:22px 22px,100% 100%;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;overflow:hidden;position:relative;width:100%}.home-decor{inset:0;overflow:hidden;pointer-events:none;position:absolute;z-index:0}.decor-glow{border-radius:50%;filter:blur(60px);position:absolute}.decor-glow.g1{background:#60a5fa47;height:340px;left:-100px;top:-120px;width:340px}.decor-glow.g2{background:#f472b61a;height:300px;right:-130px;top:60px;width:300px}.decor-glow.g3{background:#34d3991f;bottom:-140px;height:360px;left:50%;transform:translateX(-50%);width:360px}.decor-note{animation:decor-float 7s ease-in-out infinite alternate;border-radius:7px;box-shadow:0 10px 22px #0f172a1a;position:absolute}.decor-note:before{background:#94a3b847;border-radius:2px;content:"";height:12px;left:50%;position:absolute;top:-7px;transform:translateX(-50%) rotate(-3deg);width:46%}.decor-note.n1{animation-delay:-1.2s;background:#fde68a;height:48px;left:7%;opacity:.92;top:96px;transform:rotate(-9deg);width:48px}.decor-note.n2{animation-delay:-3.4s;background:#fbcfe8;height:38px;opacity:.92;right:9%;top:190px;transform:rotate(7deg);width:38px}.decor-note.n3{animation-delay:-5.1s;background:#bfdbfe;height:36px;left:12%;opacity:.9;top:330px;transform:rotate(5deg);width:36px}.decor-note.n4{animation-delay:-2.3s;background:#bbf7d0;height:46px;opacity:.85;right:-14px;top:47%;transform:rotate(-8deg);width:46px}.decor-note.n5{animation-delay:-4.2s;background:#fed7aa;bottom:26%;height:40px;left:5%;opacity:.85;transform:rotate(10deg);width:40px}.decor-note.n6{animation-delay:-.6s;background:#fef3c7;bottom:12%;height:32px;opacity:.8;right:11%;transform:rotate(-12deg);width:32px}@keyframes decor-float{0%{translate:0 -7px}to{translate:0 7px}}@media(prefers-reduced-motion:reduce){.decor-note{animation:none}}.lang-corner{position:absolute;right:14px;top:14px;z-index:100}.lang-corner .lang-toggle-btn{background:#fffc;border-color:#e2e8f0;color:#475569}.lang-corner .lang-toggle-btn:hover{border-color:#cbd5e1;color:#0f172a}.lang-corner .lang-dropdown{background:#fff;box-shadow:0 12px 28px #0f172a24}.lang-corner .lang-option{color:#475569}.lang-corner .lang-option:hover{background:#f1f5f9}.lang-corner .lang-option.active{background:#eff4ff;color:#2563eb}.top-area{flex-direction:column;padding:64px 24px 8px;position:relative;text-align:center;z-index:1}.logo-tile,.top-area{align-items:center;display:flex}.logo-tile{justify-content:center;margin-bottom:18px}.logo-tile img{filter:drop-shadow(0 10px 18px rgba(15,23,42,.14));height:72px;object-fit:contain;width:72px}.home-title{color:#0f172a;font-size:34px;font-weight:800;letter-spacing:-.03em;margin:0 0 14px}.home-subtitle{color:#64748b;font-size:15px;line-height:1.6;margin:0;white-space:pre-line;word-break:keep-all}.middle-area{align-items:center;display:flex;flex:1 1;flex-direction:column;justify-content:center;padding:28px 20px 8px;position:relative;z-index:1}.active-walls-section{max-width:480px;width:100%}.section-head{align-items:baseline;display:flex;justify-content:space-between;margin-bottom:12px;padding:0 4px}.section-title{color:#0f172a;font-size:20px;font-weight:800;letter-spacing:-.02em;margin:0}.see-more-link{align-items:center;background:none;border:none;color:#64748b;cursor:pointer;display:inline-flex;font-size:13px;font-weight:700;gap:2px;padding:4px 2px;transition:color .16s ease}.see-more-link:active,.see-more-link:hover{color:#2563eb}.wall-cards{display:flex;flex-direction:column;gap:16px}.wall-card{align-items:flex-start;background:#fff;border:1px solid #eef0f4;border-radius:24px;box-shadow:0 10px 24px #0f172a0f;cursor:pointer;display:flex;gap:16px;padding:18px;text-align:left;transition:all .18s ease;width:100%}.wall-card:active,.wall-card:hover{border-color:#c7d7f5;box-shadow:0 14px 30px #2563eb1f;transform:translateY(-1px)}.wall-card-thumb{border:1px solid #0f172a0f;border-radius:18px;flex-shrink:0;height:76px;width:76px}.wall-card-content{display:flex;flex:1 1;flex-direction:column;gap:4px;min-width:0}.wall-card-head{align-items:center;display:flex;gap:10px;justify-content:space-between}.wall-card-title{color:#0f172a;font-size:17px;font-weight:800;letter-spacing:-.02em;line-height:1.3;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wall-card-arrow{color:#475569;flex-shrink:0}.wall-card-domain{color:#64748b;font-size:13px;margin:0;word-break:break-all}.wall-card-badges{align-items:center;display:flex;gap:8px;justify-content:space-between;margin-top:8px}.wall-card-private{background:#ef4444;color:#fff;font-size:12px;font-weight:800}.wall-card-posts,.wall-card-private{align-items:center;border-radius:999px;display:inline-flex;gap:5px;padding:6px 12px}.wall-card-posts{background:#f1f5f9;color:#334155;font-size:13px;font-weight:700;margin-left:auto}.bottom-area{align-items:center;display:flex;flex-direction:column;padding:20px 20px calc(24px + env(safe-area-inset-bottom));position:relative;z-index:1}.enter-card{background:#fff;border:1px solid #eef0f4;border-radius:24px;box-shadow:0 10px 24px #0f172a0f;max-width:480px;padding:24px 22px 22px;width:100%}.enter-card-title{color:#0f172a;font-size:19px;font-weight:800;letter-spacing:-.02em;margin:0 0 6px}.enter-card-desc{color:#64748b;font-size:14px;margin:0 0 16px}.domain-input-box{background:#f8fafc;border:1px solid #e2e8f0;border-radius:16px;cursor:text;display:block;padding:14px 16px;transition:border-color .16s ease,box-shadow .16s ease}.domain-input-box:focus-within{border-color:#2563eb;box-shadow:0 0 0 3px #2563eb1f}.domain-input{background:#0000;border:none;color:#0f172a;font-size:17px;font-weight:700;outline:none;width:100%}.domain-input::placeholder{color:#9aa2ad;font-weight:600}.enter-button{background:#2563eb;border:none;border-radius:999px;box-shadow:0 7px 14px #2563eb40;color:#fff;cursor:pointer;font-size:16px;font-weight:800;margin-top:16px;padding:15px 0;transition:all .16s ease;width:100%}.enter-button:hover:not(:disabled){background:#1d4ed8;box-shadow:0 12px 22px #2563eb4d;transform:translateY(-1px)}.enter-button:disabled{background:#cbd5e1;box-shadow:none;color:#f8fafc;cursor:not-allowed}.error-msg{color:#dc2626;font-size:13px;font-weight:700;margin:10px 2px 0}.copyright{color:#94a3b8;font-size:12px;margin:16px 0 0;white-space:nowrap}.navbar{background-color:#fff;border-bottom:1px solid #e6eaf0;height:60px;justify-content:space-between;padding:0 16px;position:sticky;top:0;transition:background-color .2s ease;width:100%;z-index:100}.nav-left,.navbar{align-items:center;display:flex}.nav-left{gap:8px;min-width:0}.nav-left .back-btn{align-items:center;border-radius:12px;color:#475569;display:flex;flex-shrink:0;height:40px;justify-content:center;text-decoration:none;transition:all .16s ease;width:40px}.nav-left .back-btn:hover{background-color:#0f172a0f;color:#0f172a}.nav-left .back-btn:active{transform:scale(.95)}.nav-left .back-btn svg{height:24px;width:24px}.nav-left .title{color:#0f172a;font-size:1.0625rem;font-weight:800;letter-spacing:-.02em;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.share-btn{align-items:center;background:#0000;border:none;border-radius:12px;color:#475569;cursor:pointer;display:flex;flex-shrink:0;height:40px;justify-content:center;padding:0;transition:all .16s ease;width:40px}.share-btn:hover{background-color:#0f172a0f;color:#0f172a}.share-btn:active{transform:scale(.95)}.share-btn svg{height:21px;width:21px}.navbar--dark{border-bottom-color:#ffffff29}.navbar--dark .share-btn{color:#ffffffd9}.navbar--dark .share-btn:hover{background-color:#ffffff24;color:#fff}.navbar--dark .nav-left .back-btn{color:#ffffffd9}.navbar--dark .nav-left .back-btn:hover{background-color:#ffffff24;color:#fff}.navbar--dark .nav-left .title{color:#fff}.cs-fitbox{align-items:center;display:flex;height:100%;justify-content:center;min-height:0;min-width:0;width:100%}.composed-sticker{background-repeat:no-repeat;background-size:100% 100%;position:relative;transition:opacity .2s ease}.composed-sticker.glow{filter:drop-shadow(0 0 10px rgba(255,214,90,.95)) drop-shadow(0 0 22px rgba(255,176,32,.65))}.composed-sticker .cs-clip{inset:0;position:absolute}.composed-sticker .cs-overlay{height:100%;inset:0;object-fit:fill;pointer-events:none;position:absolute;width:100%}.composed-sticker .cs-text{color:#3f3a2f;font-weight:700;line-height:1.45;overflow-wrap:anywhere;pointer-events:none;position:absolute;text-align:center;transform:translate(-50%,-50%);white-space:pre-wrap;word-break:keep-all}.stage-preview{background:#fff;border:1px solid #eef0f4;box-shadow:0 10px 24px #0f172a0f;overflow:hidden;width:100%}.stage-preview__wall{aspect-ratio:16/10;background-color:#dbeafe;background-position:50%;background-repeat:no-repeat;background-size:cover;min-height:180px;overflow:hidden;position:relative;width:100%}.stage-preview .stage-preview-cards{height:100%;inset:0;position:absolute;width:100%}.stage-preview .stage-sticker-card{position:absolute;transform:translate(-50%,-50%)}.stage-preview .stage-sticker-card.animate-insert{animation:stage-sticker-pop 2s cubic-bezier(.23,1.02,.35,1) both;z-index:10}.stage-preview .stage-pastel-note{align-items:center;border-radius:4px;box-shadow:0 3px 8px #0f172a1f;box-sizing:border-box;display:flex;height:64px;justify-content:center;overflow:hidden;padding:6px;width:64px}.stage-preview .stage-pastel-note.glow{animation:stage-note-glow 1.5s ease-in-out infinite;box-shadow:0 0 12px 2px #ffd700b3,0 0 22px 6px #ffb40066}.stage-preview .stage-pastel-text{-webkit-line-clamp:5;-webkit-box-orient:vertical;color:#334155;display:-webkit-box;font-size:8px;line-height:1.3;overflow:hidden;text-align:center;word-break:break-word}.stage-preview .floating-reaction-emoji{animation:stage-floating-emoji .8s ease-out forwards;font-size:28px;left:50%;pointer-events:none;position:absolute;top:50%;z-index:100}.stage-preview__modal-overlay{align-items:center;display:flex;inset:0;justify-content:center;padding:16px;position:absolute;z-index:20}.stage-preview-card{animation:stage-card-in .32s cubic-bezier(.34,1.56,.64,1) both;background:#fff;border:1px solid #eef0f4;border-radius:18px;box-shadow:0 16px 36px #0f172a38;display:flex;flex-direction:column;height:100%;max-height:100%;max-width:340px;overflow:hidden;width:100%}.stage-preview-card .card-header{align-items:center;background:#f8fafc;border-bottom:1px solid #eef0f4;display:flex;flex-shrink:0;gap:10px;padding:12px 16px}.stage-preview-card .card-header .user-info{align-items:center;display:flex;gap:10px;min-width:0}.stage-preview-card .sticker-icon{background:#fff;border:1px solid #e2e8f0;border-radius:50%;flex-shrink:0;height:34px;object-fit:cover;width:34px}.stage-preview-card .user-name{color:#0f172a;font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stage-preview-card .card-body{align-items:flex-start;background:#fff;display:flex;flex:1 1;flex-direction:column;justify-content:flex-start;min-height:0;overflow:auto;padding:14px 16px}.stage-preview-card .card-body .content-composed{height:100%;min-height:0}.stage-preview-card .card-body .content-composed,.stage-preview-card .content-drawing,.stage-preview-card .content-image{align-items:center;display:flex;justify-content:center;width:100%}.stage-preview-card .content-drawing .content-img,.stage-preview-card .content-image .content-img{border-radius:10px;max-height:180px;max-width:100%;object-fit:contain}.stage-preview-card .content-text-only{width:100%}.stage-preview-card .content-text-only .content-text{color:#334155;font-size:16px;line-height:1.6;margin:0;text-align:left;white-space:pre-wrap;width:100%;word-break:break-word}.stage-preview-card .content-text-image{align-items:flex-start;display:flex;gap:12px;width:100%}.stage-preview-card .content-text-image .content-img{border-radius:10px;flex-shrink:0;max-height:160px;max-width:130px;object-fit:cover;width:40%}.stage-preview-card .content-text-image .content-text{color:#334155;flex:1 1;font-size:14px;line-height:1.55;margin:0;text-align:left;white-space:pre-wrap;word-break:break-word}.stage-preview-card .content-sticker-only{align-items:center;display:flex;justify-content:center;width:100%}.stage-preview-card .content-sticker-only .sticker-large{height:150px;object-fit:contain;width:150px}.stage-preview-card .full-width{border-radius:10px;max-height:180px;max-width:100%;object-fit:contain}.stage-preview-card .content-text{color:#334155;font-size:16px;line-height:1.6;margin:0;text-align:left}.stage-preview-card .progress-bar-container{background:#eef0f4;border-radius:999px;flex-shrink:0;height:4px;margin:6px 0 0;overflow:hidden;width:100%}.stage-preview-card .progress-bar{background:linear-gradient(90deg,#60a5fa,#2563eb);border-radius:999px;height:100%;transition:width .1s linear;will-change:width}.stage-preview-card .card-footer{background:#f8fafc;border-top:1px solid #eef0f4;flex-shrink:0;padding:10px 12px}.stage-preview-card.composed-mode{background:#0000;border:none;box-shadow:none;container-type:inline-size;filter:drop-shadow(0 14px 30px rgba(15,23,42,.4))}.stage-preview-card.composed-mode .card-body{background:#0000;padding:0}.stage-preview-card.composed-mode .card-footer{background:#0000;border-top:none;padding:clamp(8px,2cqw,12px) 4px 0}.stage-preview-card.composed-mode .reaction-buttons{gap:clamp(6px,2.4cqw,14px);justify-content:center}.stage-preview-card.composed-mode .reaction-btn{box-shadow:0 4px 12px #0f172a24;flex:0 1 auto;gap:clamp(3px,1cqw,6px);height:clamp(26px,7.3cqw,44px);padding:0 clamp(9px,3cqw,18px)}.stage-preview-card.composed-mode .reaction-btn .reaction-emoji{font-size:clamp(12px,3.3cqw,20px)}.stage-preview-card.composed-mode .reaction-btn .reaction-count{font-size:clamp(11px,2.5cqw,15px)}.stage-preview-card .reaction-buttons{display:flex;gap:8px;width:100%}.stage-preview-card .reaction-btn{-webkit-tap-highlight-color:rgba(0,0,0,0);align-items:center;background:#fff;border:1.5px solid #e5e7eb;border-radius:999px;color:#64748b;cursor:pointer;display:inline-flex;flex:1 1;gap:5px;height:40px;justify-content:center;min-width:0;padding:0 6px;transition:background .2s ease,border-color .2s ease,transform .16s ease,box-shadow .2s ease,color .2s ease}.stage-preview-card .reaction-btn:hover:not(:disabled){border-color:#d1d5db;transform:translateY(-1px)}.stage-preview-card .reaction-btn:active:not(:disabled){transform:translateY(0) scale(.98)}.stage-preview-card .reaction-btn:disabled{cursor:not-allowed;opacity:.55}.stage-preview-card .reaction-btn[data-type=thumb_up].selected{background:linear-gradient(135deg,#2563eb,#60a5fa);border-color:#2563eb;box-shadow:0 8px 18px -8px #2563eb8c}.stage-preview-card .reaction-btn[data-type=smile].selected{background:linear-gradient(135deg,#f59e0b,#fb923c);border-color:#f59e0b;box-shadow:0 8px 18px -8px #f59e0b8c}.stage-preview-card .reaction-btn[data-type=like].selected{background:linear-gradient(135deg,#f43f5e,#fb7185);border-color:#f43f5e;box-shadow:0 8px 18px -8px #f43f5e8c}.stage-preview-card .reaction-btn.selected{transform:translateY(-1px)}.stage-preview-card .reaction-btn.selected .reaction-emoji{transform:scale(1.1)}.stage-preview-card .reaction-btn.selected .reaction-label{color:#fff;font-weight:700}.stage-preview-card .reaction-btn.selected .reaction-count{color:#fff}.stage-preview-card .reaction-btn.selected:disabled{background:linear-gradient(135deg,#9ca3af,#cbd5e1);border-color:#9ca3af}.stage-preview-card .reaction-btn.selected:disabled .reaction-count,.stage-preview-card .reaction-btn.selected:disabled .reaction-label{color:#fff}.stage-preview-card .reaction-btn .reaction-emoji{font-size:15px;transition:transform .2s ease}.stage-preview-card .reaction-btn .reaction-label{color:#64748b;font-size:11px;font-weight:600;transition:color .2s ease}.stage-preview-card .reaction-btn .reaction-count{color:#334155;font-size:12px;font-weight:700;transition:color .2s ease}@keyframes stage-card-in{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}@keyframes stage-note-glow{0%,to{box-shadow:0 0 12px 2px #ffd700b3,0 0 22px 6px #ffb40066}50%{box-shadow:0 0 16px 4px #ffd700e6,0 0 30px 8px #ffb4008c}}@keyframes stage-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(2.4) rotate(1turn)}80%{opacity:1;transform:translate(-50%,-50%) scale(2.4) rotate(540deg)}to{filter:blur(0);opacity:1;transform:translate(-50%,-50%) scale(1) rotate(2turn)}}@keyframes stage-floating-emoji{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)}}.my-card-preview{position:relative;width:100%}.action-buttons{display:flex;gap:6px;position:absolute;right:12px;top:12px;z-index:10}.action-btn{align-items:center;background:#ffffffeb;border:1px solid #eef0f4;border-radius:10px;box-shadow:0 4px 10px #0f172a14;cursor:pointer;display:flex;height:32px;justify-content:center;padding:5px;transition:all .16s ease;width:32px}.action-btn img{height:18px;opacity:.55;transition:opacity .16s ease;width:18px}.action-btn:hover{border-color:#dbe2ec}.action-btn:hover img{opacity:.9}.action-btn.delete-btn:hover{background:#fef2f2;border-color:#fecaca}.action-btn:active{transform:scale(.95)}.card-container{aspect-ratio:8/5;background:#fff;border:1px solid #eef0f4;border-radius:20px;box-shadow:0 10px 24px #0f172a0f;display:flex;flex-direction:column;overflow:hidden}.card-header{border-bottom:1px solid #f1f5f9;flex-shrink:0;padding:12px 14px}.card-header .profile-container{align-items:center;display:flex;gap:10px}.card-header .preview-sticker-img{background:#f1f5f9;border-radius:50%;flex-shrink:0;height:36px;object-fit:cover;width:36px}.card-header .nickname{color:#0f172a;font-size:14px;font-weight:700;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:14px}.card-body .content-composed{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.card-body .content-image{border-radius:12px;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:12px;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:#334155;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:#94a3b8;display:flex;font-style:italic;height:100%;justify-content:center;text-align:center}.card-footer{background:#f8fafc;border-top:1px solid #f1f5f9;display:flex;flex-shrink:0;gap:8px;justify-content:flex-end;padding:10px 14px}.reaction-item{align-items:center;background:#fff;border:1px solid #eef0f4;border-radius:999px;color:#475569;display:inline-flex;font-size:12px;font-weight:700;gap:4px;padding:5px 10px}.modal-content{background:#fff;border:1px solid #eef0f4;border-radius:24px;box-shadow:0 24px 60px #0f172a40;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:#fff;border-bottom:1px solid #eef0f4;border-radius:24px 24px 0 0;display:flex;flex-shrink:0;justify-content:center;padding:18px 20px;position:relative}.modal-header h2{color:#0f172a;font-size:1.1rem;font-weight:800;letter-spacing:-.02em;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:#0f172a;font-size:16px;font-weight:800;letter-spacing:-.02em;margin-bottom:8px;text-align:center}.sticker-selection .step-desc{color:#64748b;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:#f8fafc;border:1px solid #e2e8f0;border-radius:16px;color:#0f172a;font-size:14px;padding:13px 44px 13px 16px;transition:border-color .16s ease,box-shadow .16s ease;width:100%}.sticker-selection .search-input-container .search-input::placeholder{color:#9aa2ad}.sticker-selection .search-input-container .search-input:focus{background:#fff;border-color:#2563eb;box-shadow:0 0 0 3px #2563eb1f;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:#f8fafc;border:2px solid #0000;border-radius:14px;cursor:pointer;display:flex;flex-direction:column;justify-content:center;min-width:0;padding:6px;position:relative;transition:all .16s ease}.sticker-selection .sticker-item:hover{background:#eef2f7}.sticker-selection .sticker-item:active{transform:scale(.95)}.sticker-selection .sticker-item.selected{background:#eff4ff;border-color:#2563eb;box-shadow:0 2px 8px #2563eb33}.sticker-selection .sticker-item.selected:before{border-left:6px solid #0000;border-right:6px solid #0000;border-top:8px solid #2563eb;content:"";height:0;left:50%;position:absolute;top:4px;transform:translateX(-50%);width:0}.sticker-selection .sticker-item.selected p{color:#2563eb;font-weight:700}.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:#64748b;font-size:11px;margin:4px 0 0;overflow:hidden;text-align:center;text-overflow:ellipsis;transition:color .16s 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:999px;cursor:pointer;flex:1 1;font-size:15px;font-weight:800;padding:14px;transition:all .16s ease}.sticker-selection .step-buttons .cancel-btn{background:#f1f5f9;border:none;color:#0f172a}.sticker-selection .step-buttons .cancel-btn:hover{background:#e2e8f0}.sticker-selection .step-buttons .cancel-btn:active{transform:scale(.98)}.sticker-selection .step-buttons .next-btn{background:#2563eb;border:none;box-shadow:0 7px 14px #2563eb40;color:#fff}.sticker-selection .step-buttons .next-btn:disabled{background:#cbd5e1;border:none;box-shadow:none;color:#f8fafc;cursor:not-allowed}.sticker-selection .step-buttons .next-btn:not(:disabled):hover{background:#1d4ed8;transform:translateY(-1px)}.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:#64748b;flex-shrink:0;font-size:14px;line-height:1.5;margin-bottom:16px;text-align:center}.content-input .toggle-container{background:#f1f5f9;border-radius:999px;box-shadow:none;display:flex;flex-shrink:0;margin-bottom:16px;overflow:hidden;padding:4px;width:100%}.content-input .toggle-container .toggle-btn{background:#0000;border:none;border-radius:999px;color:#64748b;cursor:pointer;flex:1 1;font-size:15px;font-weight:800;padding:10px 16px;transition:all .2s ease}.content-input .toggle-container .toggle-btn.active{background:#fff;box-shadow:0 4px 10px #0f172a14;color:#2563eb}.content-input .card-container{background:#fff;border:1px solid #eef0f4;border-radius:16px;box-shadow:0 10px 24px #0f172a0f;display:flex;flex:1 1;flex-direction:column;overflow:hidden}.content-input .card-container .card-header{border-bottom:1px solid #f1f5f9;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{background:#f8fafc;border:1px solid #e2e8f0;border-radius:16px;color:#0f172a;flex:1 1;font-size:16px;min-width:0;outline:none;padding:12px 14px;transition:border-color .16s ease,box-shadow .16s ease}.content-input .card-container .card-header .profile-container .nickname-input:focus{background:#fff;border-color:#2563eb;box-shadow:0 0 0 3px #2563eb1f}.content-input .card-container .card-header .profile-container .nickname-input::placeholder{color:#9aa2ad}.content-input .card-container .card-header .profile-container .preview-sticker-img{background:#f1f5f9;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{background:#f8fafc;border:1px solid #e2e8f0;border-radius:16px;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 #e2e8f0;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{background:#0000;border:none;color:#0f172a;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:#9aa2ad}.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:#f8fafc;border:2px dashed #cbd5e1;border-radius:14px;cursor:pointer;display:flex;flex-shrink:0;gap:8px;justify-content:center;margin-top:12px;padding:13px 16px;transition:all .16s ease;width:100%}.content-input .card-container .card-body .image-upload-btn:hover{background:#eef2f7;border-color:#94a3b8}.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:#64748b;height:24px;width:24px}.content-input .card-container .card-body .image-upload-btn .upload-text{color:#475569;font-size:14px;font-weight:700}.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:#2563eb;border-width:3px;box-shadow:0 0 0 2px #2563eb4d}.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:#eff4ff;border-color:#2563eb;border-width:2px;box-shadow:0 0 0 2px #2563eb33}.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 #e2e8f0;border-radius:14px;cursor:crosshair;flex:1 1;min-height:0;width:100%}.modal-footer{border-top:1px solid #f1f5f9;display:flex;flex-shrink:0;gap:12px;padding:20px}.modal-footer button{border:none;border-radius:999px;cursor:pointer;flex:1 1;font-size:16px;font-weight:800;padding:14px;transition:all .16s ease}.modal-footer button:first-child{background:#f1f5f9;color:#0f172a}.modal-footer button:first-child:hover{background:#e2e8f0}.modal-footer button:first-child:active{transform:scale(.98)}.modal-footer button.submit-btn{background:#2563eb;box-shadow:0 7px 14px #2563eb40;color:#fff}.modal-footer button.submit-btn:disabled{background:#cbd5e1;box-shadow:none;color:#f8fafc;cursor:not-allowed}.modal-footer button.submit-btn:not(:disabled):hover{background:#1d4ed8;transform:translateY(-1px)}.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:1px solid #eef0f4;border-radius:24px;box-shadow:0 24px 60px #0f172a40;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:#0f172a;font-size:16px;font-weight:600;line-height:1.5;margin:0 0 24px;word-break:keep-all}.warning-modal .warning-modal-btn{background:#2563eb;border:none;border-radius:999px;box-shadow:0 7px 14px #2563eb40;color:#fff;cursor:pointer;font-size:16px;font-weight:800;padding:14px 24px;transition:all .16s ease;width:100%}.warning-modal .warning-modal-btn:hover{background:#1d4ed8;transform:translateY(-1px)}.warning-modal .warning-modal-btn:active{transform:scale(.98)}@keyframes warningModalIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.sticker-page{background:#f7f8fb;display:flex;flex-direction:column;inset:0;position:fixed;z-index:600}.sp-header{background:#fff;border-bottom:1px solid #eef0f4;flex-shrink:0;gap:6px;height:56px;padding:0 10px}.sp-header,.sp-icon-btn{align-items:center;display:flex}.sp-icon-btn{background:none;border:none;border-radius:12px;color:#475569;cursor:pointer;height:40px;justify-content:center;transition:all .16s ease;width:40px}.sp-icon-btn:hover{background:#f1f5f9;color:#0f172a}.sp-title{color:#0f172a;flex:1 1;font-size:16px;font-weight:800;letter-spacing:-.02em;margin:0;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap}.sp-stepper{align-items:flex-start;display:flex;flex-shrink:0;padding:16px 28px 6px}.sp-step{flex-direction:column;gap:5px;min-width:56px}.sp-step,.sp-step .sp-step-num{align-items:center;display:flex}.sp-step .sp-step-num{background:#e2e8f0;border-radius:999px;color:#64748b;font-size:12px;font-weight:800;height:26px;justify-content:center;transition:all .2s ease;width:26px}.sp-step .sp-step-label{color:#94a3b8;font-size:11px;font-weight:700;white-space:nowrap}.sp-step.active .sp-step-num{background:#2563eb;box-shadow:0 4px 10px #2563eb4d;color:#fff}.sp-step.active .sp-step-label{color:#2563eb}.sp-step.done .sp-step-num{background:#dbeafe;color:#2563eb}.sp-step.done .sp-step-label{color:#64748b}.sp-step-line{background:#e2e8f0;border-radius:2px;flex:1 1;height:2px;margin:12px 8px 0;transition:background .2s ease}.sp-step-line.done{background:#2563eb}.sp-body{-webkit-overflow-scrolling:touch;flex:1 1;overflow-y:auto}.sticker-page .sticker-selection{flex:none;overflow:visible}.sticker-page .sticker-selection .sticker-grid{flex:none;margin-bottom:8px;max-height:none;overflow:visible}.sticker-page .content-input{flex:none;overflow:visible}.sp-group-label{color:#334155;font-size:13px;font-weight:800;letter-spacing:-.01em;margin:10px 2px 8px}.sp-type-select{padding:20px}.sp-type-select .step-desc{color:#64748b;font-size:14px;line-height:1.5;margin:0 0 16px;text-align:center}.type-cards{display:flex;flex-direction:column;gap:12px}.type-card{grid-column-gap:14px;grid-row-gap:2px;align-items:center;background:#fff;border:1px solid #eef0f4;border-radius:18px;box-shadow:0 8px 20px #0f172a0d;column-gap:14px;cursor:pointer;display:grid;grid-template-columns:46px 1fr;grid-template-rows:auto auto;padding:16px 18px;row-gap:2px;text-align:left;transition:all .16s ease;width:100%}.type-card:active,.type-card:hover{border-color:#c7d7f5;box-shadow:0 12px 24px #2563eb1f;transform:translateY(-1px)}.type-card .type-card-icon{align-items:center;background:#eff4ff;border-radius:14px;color:#2563eb;display:flex;grid-row:1/3;height:46px;justify-content:center;width:46px}.type-card .type-card-title{color:#0f172a;font-size:15px;font-weight:800;letter-spacing:-.01em}.type-card .type-card-desc{color:#64748b;font-size:13px}.sp-actions{background:#fff;border-top:1px solid #eef0f4;flex-shrink:0;padding:12px 20px calc(16px + env(safe-area-inset-bottom))}.sp-primary{background:#2563eb;border:none;border-radius:999px;box-shadow:0 7px 14px #2563eb40;color:#fff;cursor:pointer;font-size:16px;font-weight:800;padding:15px 0;transition:all .16s ease;width:100%}.sp-primary:hover:not(:disabled){background:#1d4ed8}.sp-primary:disabled{background:#cbd5e1;box-shadow:none;color:#f8fafc;cursor:not-allowed}.sp-header-spacer{flex-shrink:0;width:40px}.sp-single{padding:14px 20px 20px}.sp-section-label{color:#334155;font-size:13px;font-weight:800;letter-spacing:-.01em;margin:0 2px 8px}.sp-section-label+.sp-section-label{margin-top:18px}.sticker-row{-webkit-overflow-scrolling:touch;display:flex;gap:10px;margin-bottom:16px;overflow-x:auto;padding:2px 2px 8px}.sticker-row::-webkit-scrollbar{display:none}.sticker-row .sticker-item{align-items:center;background:#fff;border:2px solid #eef0f4;border-radius:16px;cursor:pointer;display:flex;flex-direction:column;flex-shrink:0;gap:6px;padding:10px 6px 8px;transition:all .16s ease;width:86px}.sticker-row .sticker-item:hover{border-color:#dbe4f2}.sticker-row .sticker-item:active{transform:scale(.96)}.sticker-row .sticker-item.selected{background:#eff4ff;border-color:#2563eb;box-shadow:0 4px 12px #2563eb2e}.sticker-row .sticker-item.selected p{color:#2563eb;font-weight:700}.sticker-row .sticker-item img{height:52px;object-fit:contain;width:52px}.sticker-row .sticker-item p{color:#64748b;font-size:11px;line-height:1.3;margin:0;text-align:center;transition:color .16s ease;white-space:normal;width:100%;word-break:keep-all}.sp-type-tabs{display:flex;gap:8px;margin-bottom:16px}.sp-type-tab{align-items:center;background:#fff;border:2px solid #eef0f4;border-radius:14px;color:#64748b;cursor:pointer;display:flex;flex:1 1;font-size:14px;font-weight:700;gap:6px;justify-content:center;padding:11px 0;transition:all .16s ease}.sp-type-tab:hover{border-color:#dbe4f2}.sp-type-tab.active{background:#eff4ff;border-color:#2563eb;color:#2563eb}.sp-single .content-input.sp-compose{flex:none;overflow:visible;padding:0}.sp-single .content-input.sp-compose .card-container .card-header .profile-container .preview-sticker-img{background:#0000;border-radius:0;object-fit:contain;overflow:visible}.postit-frame{align-items:center;aspect-ratio:1/1;background-position:50%;background-repeat:no-repeat;background-size:contain;display:flex;flex-direction:column;justify-content:center;margin:4px auto 0;max-width:300px;padding:17% 15%;position:relative;width:100%}.postit-text-input{background:#0000;border:none;color:#3f3a2f;font-family:inherit;font-size:16px;font-weight:700;height:100%;line-height:1.5;outline:none;resize:none;text-align:center;width:100%}.postit-text-input::placeholder{color:#3f3a2f59;font-weight:600}.postit-image-wrap{align-items:center;display:flex;flex-direction:column;gap:8px;height:100%;justify-content:center;position:relative;width:100%}.postit-image-wrap .postit-image{border-radius:8px;box-shadow:0 4px 12px #0f172a2e;max-height:72%;max-width:100%;object-fit:contain}.postit-image-wrap .remove-image-btn{align-items:center;background:#0f172aa6;border:none;border-radius:999px;color:#fff;cursor:pointer;display:flex;font-size:12px;height:26px;justify-content:center;position:absolute;right:-2px;top:-2px;width:26px}.postit-image-wrap .postit-caption-input{background:#0000;border:none;color:#3f3a2f;font-family:inherit;font-size:13px;font-weight:700;outline:none;text-align:center;width:100%}.postit-image-wrap .postit-caption-input::placeholder{color:#3f3a2f59}.postit-upload-btn{align-items:center;background:#ffffffc7;border:1.5px dashed #cbd5e1;border-radius:14px;color:#64748b;cursor:pointer;display:flex;flex-direction:column;font-size:13px;font-weight:700;gap:6px;padding:16px 22px;transition:all .16s ease}.postit-upload-btn:hover{border-color:#2563eb;color:#2563eb}.postit-upload-btn .upload-icon{height:20px;width:20px}.postit-canvas{aspect-ratio:400/250;background:#ffffffeb;border:1px solid #0f172a1a;border-radius:10px;box-shadow:0 4px 12px #0f172a24;cursor:crosshair;height:auto;touch-action:none;width:100%}.sp-single .postit-toolbar-wrap{margin-top:10px}.sp-single .content-input.sp-compose .card-container{flex:none;overflow:visible}.sp-single .content-input.sp-compose .card-container .card-body{display:block;flex:none;min-height:0;overflow:visible;padding:14px}.postit-sheet{align-items:center;aspect-ratio:1/1;background-position:50%;background-repeat:no-repeat;background-size:contain;display:flex;flex-direction:column;gap:4px;margin:0 auto;max-width:340px;padding:19% 16% 17%;position:relative;width:100%}.postit-area-guide{border:1.5px dashed #3b82f680;border-radius:8px;pointer-events:none;position:absolute;z-index:0}.postit-clip{inset:0;position:absolute}.postit-nickname-input{background:#0000;border:none;color:#3f3a2f;flex-shrink:0;font-family:inherit;font-size:15px;font-weight:800;letter-spacing:-.01em;outline:none;text-align:center;width:100%}.postit-nickname-input::placeholder{color:#3f3a2f59;font-weight:700}.postit-sheet .postit-text-input{flex:1 1;font-size:15px;height:auto;margin:0;text-align:left}.postit-sheet .postit-image-wrap{flex:1 1;height:auto;min-height:0}.postit-sheet .postit-canvas{margin-top:4px}.postit-text-block{color:#3f3a2f;cursor:grab;font-weight:700;line-height:1.45;max-width:82%;overflow-wrap:anywhere;position:absolute;text-align:center;touch-action:none;transform:translate(-50%,-50%);user-select:none;-webkit-user-select:none;white-space:pre-wrap;word-break:keep-all}.postit-text-block:active{cursor:grabbing}.postit-text-block.is-placeholder{color:#3f3a2f61}.postit-drawing,.postit-photo{cursor:grab;height:auto;position:absolute;touch-action:none;user-select:none;-webkit-user-select:none}.postit-drawing:active,.postit-photo:active{cursor:grabbing}.postit-photo{border-radius:6px;box-shadow:0 6px 16px #0f172a38}.postit-draw-canvas{background:#0000;cursor:crosshair;height:100%;inset:0;position:absolute;touch-action:none;width:100%}.sheet-editor{background:#fff;border:1px solid #eef0f4;border-radius:16px;display:flex;flex-direction:column;gap:10px;margin-top:12px;padding:14px}.sheet-editor-input{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;color:#0f172a;font-family:inherit;font-size:14px;outline:none;padding:12px 14px;resize:none;transition:border-color .16s ease,box-shadow .16s ease;width:100%}.sheet-editor-input:focus{border-color:#2563eb;box-shadow:0 0 0 3px #2563eb1f}.sheet-editor-input::placeholder{color:#9aa2ad}.sheet-editor-row{align-items:center;display:flex;gap:10px}.sheet-editor-row input[type=range]{accent-color:#2563eb;flex:1 1}.sheet-editor-label{color:#334155;flex-shrink:0;font-size:13px;font-weight:700;width:52px}.sheet-editor-value{color:#64748b;flex-shrink:0;font-size:12px;font-weight:700;min-width:44px;text-align:right}.sheet-font-select{background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;color:#0f172a;flex:1 1;font-size:14px;font-weight:600;outline:none;padding:9px 12px}.sheet-editor-btn{align-items:center;background:#f1f5f9;border:none;border-radius:999px;color:#334155;cursor:pointer;display:inline-flex;font-size:13px;font-weight:700;gap:6px;justify-content:center;padding:10px 16px;transition:background .16s ease}.sheet-editor-btn:hover{background:#e2e8f0}.done-drawing-btn{background:#eff4ff;color:#2563eb;margin-top:10px;width:100%}.done-drawing-btn:hover{background:#dbe7fe}.sheet-editor-hint{color:#94a3b8;font-size:11px;margin:0;text-align:center}.sp-single{padding:12px 20px 16px}.postit-sheet{max-width:290px}.sticker-row{margin-bottom:12px}.sticker-row .sticker-item{padding:8px 5px 7px;width:76px}.sticker-row .sticker-item img{height:44px;width:44px}.sticker-row .sticker-item p{font-size:10px}.sp-type-tabs{margin-bottom:12px}.sp-type-tab{font-size:13px;padding:9px 0}.postit-toolbar-wrap{margin-top:12px}.postit-toolbar-wrap .toolbar{align-items:center;background:#fff;border:1px solid #eef0f4;border-radius:14px;display:flex;gap:8px;padding:10px 12px}.postit-toolbar-wrap .palette-wrapper{position:relative}.postit-toolbar-wrap .palette-btn{align-items:center;background:#fff;border:1px solid #e2e8f0;border-radius:10px;cursor:pointer;display:flex;height:34px;justify-content:center;width:34px}.postit-toolbar-wrap .palette-btn .color-preview{border:1px solid #0f172a26;border-radius:50%;height:18px;width:18px}.postit-toolbar-wrap .color-dropdown{grid-gap:8px;background:#fff;border:1px solid #eef0f4;border-radius:12px;box-shadow:0 12px 28px #0f172a29;display:grid;gap:8px;grid-template-columns:repeat(6,24px);left:0;padding:10px;position:absolute;top:40px;z-index:10}.postit-toolbar-wrap .color-btn{border:1px solid #0f172a1f;border-radius:50%;cursor:pointer;height:24px;padding:0;width:24px}.postit-toolbar-wrap .color-btn.active{outline:2px solid #2563eb;outline-offset:1px}.postit-toolbar-wrap .line-width-selector{display:flex;gap:3px}.postit-toolbar-wrap .line-width-container{align-items:center;background:#0000;border:none;border-radius:8px;cursor:pointer;display:flex;height:30px;justify-content:center;width:30px}.postit-toolbar-wrap .line-width-container.active{background:#eff4ff}.postit-toolbar-wrap .line-width-container .line-width-btn{background:#334155;border-radius:2px}.postit-toolbar-wrap .history-buttons{display:flex;gap:4px;margin-left:auto}.postit-toolbar-wrap .clear-btn,.postit-toolbar-wrap .redo-btn,.postit-toolbar-wrap .undo-btn{align-items:center;background:#f1f5f9;border:none;border-radius:8px;color:#334155;cursor:pointer;display:flex;height:32px;justify-content:center;width:32px}.postit-toolbar-wrap .clear-btn svg,.postit-toolbar-wrap .redo-btn svg,.postit-toolbar-wrap .undo-btn svg{height:16px;width:16px}.postit-toolbar-wrap .clear-btn:disabled,.postit-toolbar-wrap .redo-btn:disabled,.postit-toolbar-wrap .undo-btn:disabled{cursor:not-allowed;opacity:.35}.modal-overlay{align-items:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0f172a73;display:flex;height:100%;justify-content:center;left:0;padding:20px;position:fixed;top:0;width:100%;z-index:1000}.popup-content{background:#fff;border:1px solid #eef0f4;border-radius:24px;box-shadow:0 24px 60px #0f172a40;max-width:400px;padding:28px 24px 24px;text-align:left;width:100%}.popup-title{color:#0f172a;font-size:20px;font-weight:800;letter-spacing:-.02em;margin:0 0 12px;text-align:center}.popup-description{color:#64748b;font-size:15px;line-height:1.6;margin:0 0 24px;text-align:center;word-break:keep-all}.popup-actions{display:flex;gap:12px;justify-content:center}.cancel-btn{background:#f1f5f9;border:none;border-radius:999px;color:#0f172a;cursor:pointer;flex:1 1;font-size:15px;font-weight:800;padding:14px 0;transition:all .16s ease}.cancel-btn:hover{background:#e2e8f0}.confirm-btn{background:#ef4444;border:none;border-radius:999px;box-shadow:0 7px 14px #ef444440;color:#fff;cursor:pointer;flex:1 1;font-size:15px;font-weight:800;padding:14px 0;transition:all .16s ease}.confirm-btn:hover{background:#dc2626;box-shadow:0 12px 22px #ef44444d;transform:translateY(-1px)}.confirm-btn:active{transform:translateY(0)}.poll-section{display:flex;flex-direction:column;gap:16px}.poll-card{background:#fff;border-radius:12px;box-shadow:0 1px 3px #00000014;padding:20px}.poll-card .poll-question{color:#2f3e3f;font-size:16px;font-weight:600;margin:0 0 8px}.poll-card .poll-hint{color:#9cabab;font-size:13px;margin:0 0 12px}.poll-card .poll-hint.voted{color:#a14f10;font-weight:500}.poll-options{display:flex;flex-direction:column;gap:8px}.poll-option{background:#f5f9f8;border:2px solid #eaf3f1;border-radius:10px;cursor:pointer;overflow:hidden;padding:14px 16px;position:relative;text-align:left;transition:all .2s ease;width:100%}.poll-option:hover:not(:disabled){background:#fef9e7;border-color:#fee665}.poll-option:disabled{cursor:default}.poll-option.voted{background:#fff;border-color:#eaf3f1;padding:12px 16px}.poll-option.selected{background:#fef9e7;border-color:#fee665}.poll-option.selected .option-text{color:#a14f10;font-weight:600}.poll-option .option-text{color:#2f3e3f;display:block;font-size:15px;margin-bottom:0}.poll-option.voted .option-text{font-size:14px;margin-bottom:8px}.poll-option .result-bar-wrapper{background:#f5f9f8;border-radius:6px;height:24px;overflow:hidden;position:relative}.poll-option .result-bar{background:linear-gradient(90deg,#fee665,#fdd835);border-radius:6px;height:100%;left:0;position:absolute;top:0;transition:width .5s ease}.poll-option .result-text{color:#2f3e3f;font-size:12px;font-weight:500;line-height:24px;padding-left:8px;position:relative;z-index:1}.poll-total{color:#9cabab;font-size:12px;margin:8px 0 0;text-align:right}.quiz-overlay{align-items:center;background:#000000d9;bottom:0;display:flex;justify-content:center;left:0;padding:16px;position:fixed;right:0;top:0;z-index:1000}.quiz-container{background:#fff;border-radius:20px;max-height:90vh;max-width:480px;overflow-y:auto;padding:24px;position:relative;width:100%}.quiz-close{align-items:center;background:#f5f9f8;border:none;border-radius:50%;color:#4e6364;cursor:pointer;display:flex;height:36px;justify-content:center;position:absolute;right:16px;top:16px;width:36px;z-index:1}.quiz-close:hover{background:#eaf3f1}.quiz-question-view .quiz-progress{color:#9cabab;font-size:13px;margin-bottom:8px;text-align:center}.quiz-question-view .quiz-timer{align-items:center;color:#2f3e3f;display:flex;font-size:20px;font-weight:700;gap:6px;justify-content:center;margin-bottom:20px}.quiz-question-view .quiz-timer svg{color:#9cabab}.quiz-question-view .quiz-timer .urgent{animation:pulse .5s infinite alternate;color:#dc2626}.quiz-question-view .question-text{color:#2f3e3f;font-size:18px;font-weight:600;line-height:1.4;margin:0 0 24px;text-align:center}.quiz-options{display:flex;flex-direction:column;gap:10px}.quiz-option{align-items:center;background:#fff;border:2px solid #eaf3f1;border-radius:12px;cursor:pointer;display:flex;gap:12px;padding:14px 16px;text-align:left;transition:all .2s;width:100%}.quiz-option:hover:not(:disabled){background:#fef9e7;border-color:#fee665}.quiz-option:disabled{cursor:default}.quiz-option.selected{background:#fef9e7;border-color:#fee665}.quiz-option.correct{background:#dcfce7;border-color:#16a34a}.quiz-option.correct .option-label{background:#16a34a;color:#fff}.quiz-option.wrong{background:#fef2f2;border-color:#dc2626}.quiz-option.wrong .option-label{background:#dc2626;color:#fff}.quiz-option .option-label{align-items:center;background:#f5f9f8;border-radius:8px;color:#4e6364;display:flex;flex-shrink:0;font-size:14px;font-weight:600;height:32px;justify-content:center;width:32px}.quiz-option .option-text{color:#2f3e3f;flex:1 1;font-size:15px}.quiz-option .result-icon{flex-shrink:0}.quiz-option.correct .result-icon{color:#16a34a}.quiz-option.wrong .result-icon{color:#dc2626}.answer-feedback{align-items:center;border-radius:10px;display:flex;font-size:16px;font-weight:600;gap:12px;justify-content:center;margin-top:16px;padding:12px}.answer-feedback.correct{background:#dcfce7;color:#16a34a}.answer-feedback.wrong{background:#fef2f2;color:#dc2626}.answer-feedback .feedback-score{font-size:14px;opacity:.8}.waiting-text{color:#9cabab;font-size:14px;margin-top:16px;text-align:center}.quiz-waiting{padding:40px 0;text-align:center}.quiz-waiting h2{color:#2f3e3f;font-size:18px;margin:0 0 8px}.quiz-waiting p{color:#9cabab;font-size:14px;margin:0}.quiz-leaderboard .leaderboard-header{margin-bottom:20px;text-align:center}.quiz-leaderboard .leaderboard-header .trophy-icon{color:#fee665}.quiz-leaderboard .leaderboard-header h2{color:#2f3e3f;font-size:20px;font-weight:700;margin:8px 0 0}.my-rank-card{align-items:center;background:linear-gradient(135deg,#fef9e7,#fee665);border-radius:12px;display:flex;gap:12px;justify-content:center;margin-bottom:16px;padding:16px}.my-rank-card .rank-label{color:#a14f10;font-size:14px}.my-rank-card .rank-number{color:#a14f10;font-size:28px;font-weight:800}.my-rank-card .rank-score{color:#a14f10;font-size:14px;font-weight:500}.leaderboard-list{display:flex;flex-direction:column;gap:6px}.leaderboard-item{align-items:center;background:#f5f9f8;border-radius:10px;display:flex;gap:12px;padding:10px 14px}.leaderboard-item.is-me{background:#fef9e7;border:1.5px solid #fee665}.leaderboard-item .rank{align-items:center;background:#eaf3f1;border-radius:50%;color:#4e6364;display:flex;flex-shrink:0;font-size:13px;font-weight:700;height:28px;justify-content:center;width:28px}.leaderboard-item .rank.top-1{background:#fbbf24;color:#fff}.leaderboard-item .rank.top-2{background:#9ca3af;color:#fff}.leaderboard-item .rank.top-3{background:#d97706;color:#fff}.leaderboard-item .name{color:#2f3e3f;flex:1 1;font-size:14px;font-weight:500}.leaderboard-item .score{color:#4e6364;font-size:14px;font-weight:600}.mosaic-section{width:100%}.mosaic-card{background:#fff;border-radius:12px;box-shadow:0 1px 3px #00000014;padding:20px}.mosaic-header{align-items:center;display:flex;gap:8px;margin-bottom:12px}.mosaic-header svg{color:#a14f10}.mosaic-header h3{color:#2f3e3f;font-size:15px;font-weight:600;margin:0}.mosaic-title{color:#4e6364;font-size:14px;margin:0 0 16px}.mosaic-buttons{display:flex;gap:12px}.mosaic-btn{align-items:center;background:#f5f9f8;border:2px dashed #cdd7d4;border-radius:12px;cursor:pointer;display:flex;flex:1 1;flex-direction:column;gap:8px;padding:24px 16px;transition:all .2s}.mosaic-btn svg{color:#9cabab}.mosaic-btn span{color:#4e6364;font-size:13px;font-weight:500}.mosaic-btn:hover{background:#fef9e7;border-color:#fee665}.mosaic-btn.camera-btn:hover svg,.mosaic-btn:hover svg{color:#a14f10}.mosaic-preview .preview-image{border-radius:10px;margin-bottom:12px;max-height:240px;object-fit:cover;width:100%}.mosaic-preview .mosaic-nickname-row{margin-bottom:12px}.mosaic-preview .mosaic-nickname-row .nickname-input{background:#f5f9f8;border:1.5px solid #eaf3f1;border-radius:8px;box-sizing:border-box;color:#2f3e3f;font-size:14px;outline:none;padding:10px 14px;width:100%}.mosaic-preview .mosaic-nickname-row .nickname-input:focus{background:#fff;border-color:#fee665}.mosaic-preview .mosaic-nickname-row .nickname-input::placeholder{color:#9cabab}.mosaic-actions{display:flex;gap:8px}.mosaic-actions .upload-btn{align-items:center;background:#fee665;border:none;border-radius:10px;color:#a14f10;cursor:pointer;display:flex;flex:1 1;font-size:14px;font-weight:600;gap:6px;justify-content:center;padding:12px;transition:background .2s}.mosaic-actions .upload-btn:hover:not(:disabled){background:#fdd835}.mosaic-actions .upload-btn:disabled{cursor:default;opacity:.6}.mosaic-actions .cancel-btn{background:#fff;border:1.5px solid #eaf3f1;border-radius:10px;color:#4e6364;cursor:pointer;font-size:14px;padding:12px 20px;transition:background .2s}.mosaic-actions .cancel-btn:hover{background:#f5f9f8}.mosaic-success{align-items:center;color:#16a34a;display:flex;flex-direction:column;gap:12px;padding:32px 0}.mosaic-success p{font-size:16px;font-weight:600;margin:0}.wall-banner-strip{aspect-ratio:8/1;flex-shrink:0;height:auto;overflow:hidden;width:100%}.wall-banner-strip a{display:block;height:100%;line-height:0;width:100%}.wall-banner-strip__img{display:block;height:100%;object-fit:cover;width:100%}.wall-page{background-color:#f7f8fb;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}.content-container{flex:1 1;gap:14px;margin:0 auto;max-width:640px;padding:16px 16px 8px}.content-container,.wall-board{display:flex;flex-direction:column;width:100%}.my-stickers-section{width:100%}.my-stickers-section h2{color:#0f172a;font-size:15px;font-weight:800;letter-spacing:-.02em;margin:6px 4px 10px}.my-stickers-section .my-stickers-list{display:flex;flex-direction:column;gap:16px;width:100%}.my-stickers-section .empty-stickers-msg{align-items:center;background:#fff9;border:1.5px dashed #dbe2ea;border-radius:16px;color:#94a3b8;display:flex;flex-direction:column;font-size:13px;font-weight:600;gap:14px;margin:0;padding:26px 16px;text-align:center}.my-stickers-section .empty-stickers-msg p{margin:0}.my-stickers-section .empty-stickers-cta{align-items:center;background:#2563eb;border:none;border-radius:999px;box-shadow:0 8px 18px #2563eb47;color:#fff;cursor:pointer;display:inline-flex;font-size:14px;font-weight:700;justify-content:center;padding:11px 22px;transition:all .16s ease}.my-stickers-section .empty-stickers-cta:hover{background:#1d4ed8;transform:translateY(-1px)}.my-stickers-section .empty-stickers-cta:active{transform:scale(.97)}.add-sticker-fab{align-items:center;background:#fff;border:1px solid #eef0f4;border-radius:999px;bottom:calc(20px + env(safe-area-inset-bottom));box-shadow:0 12px 28px #0f172a38;cursor:pointer;display:flex;height:58px;justify-content:center;position:fixed;right:18px;transition:all .16s ease;width:58px;z-index:90}.add-sticker-fab img{height:30px;object-fit:contain;width:30px}.add-sticker-fab:hover{box-shadow:0 16px 34px #0f172a47;transform:translateY(-2px)}.add-sticker-fab:active{transform:scale(.94)}.wall-footer{color:#b6c0cd;font-size:12px;padding:18px 16px calc(20px + env(safe-area-inset-bottom));text-align:center}.wall-footer p{margin:0}.wall-footer strong{color:#94a3b8;font-weight:700}.wall-footer .tagline{display:none}.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 .card-body .content-composed{align-items:center;display:flex;height:clamp(226px,55vh,476px);justify-content:center;width:100%}.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:#eef2f6;border-radius:999px;height:5px;margin:4px 0 0;overflow:hidden;width:100%}.card-preview .progress-bar{background:linear-gradient(90deg,#60a5fa,#2563eb);border-radius:999px;height:100%;transition:width .1s linear}.card-preview .card-footer{background:#fafafa;border-top:1px solid #eee;padding:8px 12px}.card-preview.composed-mode{animation:none!important;background:#0000;border:none;box-shadow:none;container-type:inline-size;filter:drop-shadow(0 14px 30px rgba(15,23,42,.4));width:min(600px,70vw)}.card-preview.composed-mode .card-body{background:#0000}.card-preview.composed-mode .card-footer{background:#0000;border-top:none;padding:clamp(8px,2cqw,12px) 4px 0}.card-preview.composed-mode .reaction-buttons{gap:clamp(6px,2.4cqw,14px);justify-content:center}.card-preview.composed-mode .reaction-item{box-shadow:0 4px 14px #0f172a29;flex:0 1 auto;gap:clamp(3px,1cqw,6px);height:clamp(26px,7.3cqw,44px);padding:0 clamp(9px,3cqw,18px)}.card-preview.composed-mode .reaction-item .reaction-emoji{font-size:clamp(12px,3.3cqw,20px)}.card-preview.composed-mode .reaction-item .reaction-count{font-size:clamp(11px,2.5cqw,15px)}.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)}.view-note{align-items:center;border-radius:4px;box-shadow:0 4px 10px #0f172a29;box-sizing:border-box;display:flex;flex-direction:column;gap:4px;justify-content:center;min-height:96px;overflow:hidden;padding:10px 8px;width:96px}.view-note__text{-webkit-line-clamp:4;-webkit-box-orient:vertical;color:#3f3a2f;display:-webkit-box;font-size:12px;line-height:1.35;overflow:hidden;text-align:center;word-break:break-word}.view-note__nick{color:#3f3a2f8c;font-size:9px;font-weight:700}.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.96513a8c.css.map*/