*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{width:100%;height:100%;overflow:hidden;touch-action:none;background:#1a1a1a;font-family:system-ui,sans-serif}#app{width:100%;height:100%;display:grid;grid-template-columns:auto 1fr;grid-template-rows:1fr 108px;grid-template-areas:"sidebar canvas" "sidebar bottom"}#sidebar{grid-area:sidebar;background:#222;display:flex;flex-direction:column;align-items:center;padding:12px;gap:12px;overflow-y:auto;-webkit-overflow-scrolling:touch}#tools{display:flex;flex-direction:column;gap:9px}#actions{display:flex;flex-direction:column;gap:9px;margin-top:auto}.tool-btn,.action-btn{width:78px;height:78px;border:3px solid transparent;border-radius:21px;background:#333;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .1s,border-color .15s;-webkit-user-select:none;user-select:none}.tool-btn:active,.action-btn:active{transform:scale(.9)}.tool-btn.active{border-color:#fff;background:#555}.tool-icon{font-size:36px;line-height:1}.action-btn{font-size:33px;background:#3a3a3a}#canvas-area{grid-area:canvas;position:relative;overflow:hidden}#canvas{width:100%;height:100%;display:block;background:#fff;cursor:crosshair;touch-action:none}#canvas-preview{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:6;display:flex;align-items:center;justify-content:center}#canvas-preview.hidden{display:none}#canvas-preview .preview-circle{border-radius:50%;box-shadow:0 0 0 2px #0003,0 2px 12px #00000026}#canvas-preview .preview-emoji{line-height:1;filter:drop-shadow(0 2px 6px rgba(0,0,0,.2))}#bottom-bar{grid-area:bottom;background:#222;display:flex;height:100%;align-items:center;gap:18px;padding:15px 24px;overflow-x:auto;-webkit-overflow-scrolling:touch}.toolbar-section{display:flex;align-items:center;gap:12px;flex-shrink:0}#bottom-bar .toolbar-section.hidden{display:none}#update-btn{position:fixed;right:12px;bottom:12px;z-index:30;min-height:60px;padding:0 20px;border:3px solid transparent;border-radius:999px;background:#2e7d32;color:#fff;font-size:20px;font-weight:700;cursor:pointer;transition:transform .1s;-webkit-user-select:none;user-select:none}#update-btn:active{transform:scale(.96)}#update-btn.hidden{display:none}#size-control{display:flex;align-items:center;flex-shrink:0}#brush-size{width:270px;height:66px;accent-color:#fff;cursor:pointer}#colors{display:flex;gap:9px;flex-shrink:0;padding:0 6px}.color-btn{width:60px;height:60px;border:4px solid transparent;border-radius:50%;background:transparent;cursor:pointer;transition:transform .1s,border-color .15s;-webkit-user-select:none;user-select:none;flex-shrink:0;position:relative;padding:0}.color-btn:before,.color-btn:after{content:"";position:absolute;border-radius:50%;pointer-events:none}.color-btn:before{inset:2px;background:var(--swatch-fill)}.color-btn:after{inset:2px;box-shadow:inset 0 0 0 1px #0000001f}.color-btn.is-white:after{box-shadow:inset 0 0 0 1px #888}.color-btn.is-rainbow:before{inset:3px}.color-btn.is-rainbow:after{inset:3px;box-shadow:inset 0 0 0 1px #ffffff47}.color-btn:active{transform:scale(.85)}.color-btn.active{border-color:#fff}.color-btn.is-custom:after{inset:2px;box-shadow:inset 0 0 0 1px #ffffff38,0 0 0 2px #ffffff1f}.color-btn:disabled{cursor:default}#tool-hint{min-height:60px}.toolbar-hint,.toolbar-chip{min-height:60px;padding:0 20px;border-radius:999px;background:#333;color:#f4f4f4;display:flex;align-items:center;white-space:nowrap;font-size:20px}.toolbar-chip{font-weight:700}.toolbar-inline-btn,.toolbar-more-btn{min-height:60px;padding:0 20px;border:3px solid transparent;border-radius:999px;background:#333;color:#fff;font-size:20px;font-weight:700;cursor:pointer;transition:transform .1s,border-color .15s,background .15s;-webkit-user-select:none;user-select:none}.toolbar-inline-btn:active,.toolbar-more-btn:active{transform:scale(.96)}.toolbar-inline-btn:hover,.toolbar-more-btn:hover{background:#444}#clear-options{gap:9px}.toolbar-choice-btn{min-height:60px;padding:0 18px;border:3px solid transparent;border-radius:18px;background:#333;color:#fff;cursor:pointer;display:flex;align-items:center;gap:12px;font-size:20px;font-weight:700;transition:transform .1s,border-color .15s,background .15s;-webkit-user-select:none;user-select:none}.toolbar-choice-btn.active{border-color:#fff;background:#555}.toolbar-choice-btn:active{transform:scale(.96)}.toolbar-choice-icon{font-size:30px;line-height:1}.toolbar-choice-label{white-space:nowrap}#sticker-quickbar{gap:9px}.sticker-quick-btn{width:60px;height:60px;border:3px solid transparent;border-radius:18px;background:#333;color:#fff;font-size:36px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .1s,border-color .15s,background .15s;-webkit-user-select:none;user-select:none;overflow:hidden}.sticker-quick-btn:active{transform:scale(.92)}.sticker-quick-btn.active{border-color:#fff;background:#555}.sticker-quick-btn img{width:100%;height:100%;object-fit:contain}#camera-overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:15;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}#camera-overlay.hidden{display:none}#camera-video{width:100%;height:100%;object-fit:cover}#camera-hint{position:absolute;bottom:30px;background:#0009;color:#fff;padding:12px 30px;border-radius:30px;font-size:24px;pointer-events:none;animation:camera-hint-pulse 2s ease-in-out infinite}@keyframes camera-hint-pulse{0%,to{opacity:.8}50%{opacity:1}}#sticker-panel{position:absolute;bottom:0;left:0;right:0;max-height:480px;background:#222;border-radius:16px 16px 0 0;padding:0;overflow:hidden;box-shadow:0 -4px 20px #0006;z-index:10;transition:opacity .2s,transform .2s;display:flex;flex-direction:column}#sticker-panel.hidden{opacity:0;transform:translateY(20px);pointer-events:none}#sticker-grid{display:flex;flex-direction:column;overflow:hidden;flex:1}.sticker-tabs{display:flex;gap:3px;padding:12px 12px 0;overflow-x:auto;-webkit-overflow-scrolling:touch;flex-shrink:0}.sticker-tab{width:63px;height:63px;border:none;border-radius:15px 15px 6px 6px;background:#333;font-size:30px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s;-webkit-user-select:none;user-select:none}.sticker-tab:active{transform:scale(.9)}.sticker-tab.active{background:#555;box-shadow:inset 0 -3px #fff}.sticker-section-label{color:#aaa;font-size:18px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:12px 18px 6px;flex-shrink:0}.sticker-emoji-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:6px;padding:6px 12px 15px;overflow-y:auto;-webkit-overflow-scrolling:touch;flex:1}.sticker-btn{width:100%;aspect-ratio:1;border:none;border-radius:15px;background:#333;font-size:42px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .1s,background .15s;-webkit-user-select:none;user-select:none}.sticker-btn:active{transform:scale(.85)}.sticker-btn.active{background:#555;box-shadow:inset 0 0 0 2px #fff}#sticker-search{width:100%;padding:12px 18px;border:none;border-bottom:1px solid #444;background:#2a2a2a;color:#fff;font-size:21px;outline:none;flex-shrink:0}#sticker-search::placeholder{color:#888}.sticker-no-results{color:#888;text-align:center;padding:20px;font-size:14px}.sticker-pack-list{display:flex;flex-direction:column;gap:6px;padding:6px 12px 15px;overflow-y:auto;-webkit-overflow-scrolling:touch;flex:1}.sticker-pack-btn{display:flex;align-items:center;gap:15px;width:100%;padding:12px 18px;border:none;border-radius:15px;background:#333;color:#fff;cursor:pointer;transition:transform .1s,background .15s;-webkit-user-select:none;user-select:none;text-align:left}.sticker-pack-btn:active{transform:scale(.98)}.sticker-pack-btn.active{background:#555;box-shadow:inset 0 0 0 2px #fff}.sticker-pack-btn .pack-icon{font-size:42px;flex-shrink:0}.sticker-pack-btn .pack-name{font-size:21px;font-weight:600;flex-shrink:0;min-width:120px}.sticker-pack-btn .pack-preview{font-size:24px;opacity:.6;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#shape-overlay{position:absolute;top:0;left:0;pointer-events:none;z-index:4;display:none}#shape-picker{display:flex;gap:6px;background:#2a2a2a;padding:9px;border-radius:18px;box-shadow:inset 0 0 0 1px #ffffff0f}.shape-opt{width:60px;height:60px;border:3px solid transparent;border-radius:15px;background:#333;color:#fff;font-size:30px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .1s,border-color .15s;-webkit-user-select:none;user-select:none}.shape-opt:active{transform:scale(.9)}.shape-opt.active{border-color:#fff;background:#555}.shape-fill-toggle{width:60px;height:60px;border:3px solid transparent;border-radius:15px;background:#333;color:#fff;font-size:27px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .1s;-webkit-user-select:none;user-select:none}.shape-fill-toggle.active{border-color:#fff;background:#555}.shape-fill-toggle:active{transform:scale(.9)}#options-modal,#about-modal{position:absolute;inset:0;z-index:18;background:#0000008c;display:flex;align-items:center;justify-content:center}#options-modal.hidden,#about-modal.hidden{display:none}#options-card,#about-card{background:#222;border-radius:24px;padding:24px;display:flex;flex-direction:column;gap:12px;min-width:320px;box-shadow:0 10px 40px #00000080}.options-item{display:flex;align-items:center;gap:15px;min-height:72px;padding:0 24px;border:3px solid transparent;border-radius:18px;background:#333;color:#fff;font-size:24px;font-weight:700;cursor:pointer;transition:transform .1s,background .15s;-webkit-user-select:none;user-select:none}.options-item:active{transform:scale(.96)}.options-item:hover{background:#444}.options-icon{font-size:32px;line-height:1}.options-cancel{background:#2a2a2a;color:#bbb}.options-item.options-off{color:#888}.options-item.options-off .options-icon{filter:grayscale(1) opacity(.5)}#about-card{max-width:420px;text-align:center}#about-header{display:flex;align-items:center;justify-content:center;gap:12px;color:#fff;font-size:26px;font-weight:800;padding:4px 0 8px}#about-feedback{margin:0 0 6px;color:#bbb;font-size:18px;font-weight:600;line-height:1.5}#about-feedback a{color:#00e5ff;font-weight:700;word-break:break-all}#update-status{min-height:24px;color:#aaa;font-size:17px;font-weight:600}#sticker-cursor{position:absolute;pointer-events:none;font-size:48px;transform:translate(-50%,-50%);z-index:5;opacity:.7;display:none}.stamp-preview{position:absolute;pointer-events:none;line-height:1;transform:translate(-50%,-50%);z-index:5;opacity:.7}.stamp-preview img{width:100%;height:100%;object-fit:contain}@media(max-height:900px){#sidebar{padding:9px;gap:9px}#tools,#actions{gap:8px}.tool-btn,.action-btn{width:64px;height:64px;border-radius:17px}.tool-icon{font-size:30px}.action-btn{font-size:27px}}@media(max-width:1280px){#bottom-bar{padding:12px 15px;gap:12px}#brush-size{width:170px}#colors{gap:6px}.color-btn{width:40px;height:40px}.shape-opt,.shape-fill-toggle{width:52px;height:52px;font-size:26px}.sticker-quick-btn{width:52px;height:52px;font-size:30px}}@media(max-width:500px){#app{grid-template-rows:1fr 96px}.tool-btn,.action-btn{width:66px;height:66px}.tool-icon{font-size:30px}.action-btn{font-size:27px}#brush-size{width:180px}.color-btn{width:50px;height:50px}.toolbar-hint,.toolbar-chip,.toolbar-inline-btn,.toolbar-more-btn{min-height:52px;font-size:17px;padding:0 16px}.toolbar-choice-btn{min-height:52px;font-size:17px;gap:10px;padding:0 14px}.toolbar-choice-icon{font-size:24px}.sticker-quick-btn{width:52px;height:52px;font-size:30px}.shape-opt,.shape-fill-toggle{width:52px;height:52px;font-size:26px}.sticker-btn{font-size:36px}.sticker-tab{width:54px;height:54px;font-size:26px}.sticker-emoji-grid{grid-template-columns:repeat(auto-fill,minmax(66px,1fr))}#sidebar{padding:9px}#bottom-bar{padding:12px 15px;gap:12px}}