*{box-sizing:border-box;margin:0;padding:0}:root{--pink:#FF6B9D;--teal:#4ECDC4;--yellow:#FFD93D;--purple:#845EF7;--orange:#FF8C42;--green:#6BCB77}body,html{height:100%;overflow:hidden;font-family:Nunito,sans-serif;background:#f7f3ff}header{height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;background:linear-gradient(90deg,#ff6b9d,#845ef7,#4ecdc4);flex-shrink:0}h1{font-family:'Fredoka One',cursive;font-size:1.55rem;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.2);white-space:nowrap}.tabs{display:flex;gap:8px}.tab{font-family:'Fredoka One',cursive;font-size:.95rem;padding:6px 20px;border:2.5px solid rgba(255,255,255,.5);border-radius:50px;cursor:pointer;background:0 0;color:rgba(255,255,255,.75);transition:all .22s}.tab.active{background:#fff;color:var(--purple);border-color:#fff;box-shadow:0 3px 12px rgba(0,0,0,.2)}.tab:not(.active):hover{background:rgba(255,255,255,.18);color:#fff}.page{display:none;height:calc(100vh - 52px);overflow:hidden}.page.active{display:flex;flex-direction:row}.cam-col{flex:1 1 0;min-width:0;position:relative;background:#0d0d1a;overflow:hidden}.cam-col video{display:block;width:100%;height:100%;object-fit:fill;transform:scaleX(-1)}#drawCanvas{position:absolute;inset:0;width:100%;height:100%;transform:scaleX(-1);pointer-events:none}#handCursor{position:absolute;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.5);border:3px solid #fff;box-shadow:0 0 0 3px rgba(255,255,255,.2),0 3px 14px rgba(0,0,0,.4);transform:translate(-50%,-50%);pointer-events:none;display:none;transition:width .08s,height .08s,background .08s}#handCursor.drawing{background:rgba(255,230,80,.85);width:20px;height:20px}.cam-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:linear-gradient(135deg,#0d0d1a,#1e0a3c);color:#fff;text-align:center;padding:24px;transition:opacity .5s;z-index:10}.cam-overlay.gone{opacity:0;pointer-events:none}.spinner{width:50px;height:50px;border:4px solid rgba(255,255,255,.15);border-top-color:var(--purple);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.cam-overlay h2{font-family:'Fredoka One',cursive;font-size:1.3rem}.cam-overlay p{font-size:.82rem;opacity:.68;max-width:210px;line-height:1.5}.status-badge{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.6);backdrop-filter:blur(8px);color:#fff;font-weight:700;font-size:.78rem;padding:7px 18px;border-radius:50px;white-space:nowrap;display:flex;align-items:center;gap:7px;border:1px solid rgba(255,255,255,.12);z-index:5}.sdot{width:8px;height:8px;border-radius:50%;background:#444;transition:background .3s;flex-shrink:0}.sdot.on{background:#6bcb77;box-shadow:0 0 0 3px rgba(107,203,119,.35);animation:pulse 1.5s infinite}@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(107,203,119,.35)}50%{box-shadow:0 0 0 7px rgba(107,203,119,.1)}}.tools-col{width:200px;flex-shrink:0;background:#fff;border-left:3px solid #ede4ff;display:flex;flex-direction:column;overflow-y:auto;padding:14px 12px;gap:12px}.tblock{display:flex;flex-direction:column;gap:7px}.tlabel{font-size:.62rem;font-weight:900;color:#bbb;text-transform:uppercase;letter-spacing:.9px;padding-left:2px}.divider{height:1px;background:#f0e6ff;flex-shrink:0}.palette,.swatches{display:flex;flex-wrap:wrap;gap:5px}.cdot,.pdot{width:26px;height:26px;border-radius:50%;cursor:pointer;border:3px solid transparent;transition:transform .2s cubic-bezier(.34, 1.56, .64, 1),border-color .15s}.cdot:hover,.pdot:hover{transform:scale(1.28)}.cdot.sel,.pdot.sel{border-color:#333;transform:scale(1.2)}.cdot[data-c="#FFFFFF"],.pdot[data-c="#FFFFFF"]{border-color:#ddd}.cdot.sel[data-c="#FFFFFF"],.pdot.sel[data-c="#FFFFFF"]{border-color:var(--purple)}.szrow{display:flex;gap:5px}.szb{font-family:'Fredoka One',cursive;padding:5px 0;flex:1;text-align:center;border:2px solid #e8e8e8;border-radius:50px;cursor:pointer;background:#fff;color:#888;font-size:.85rem;transition:all .18s}.szb.sel,.szb:hover{background:var(--purple);color:#fff;border-color:var(--purple)}.tbtn{font-family:'Fredoka One',cursive;padding:7px 10px;border-radius:12px;cursor:pointer;background:#fff;font-size:.88rem;color:#555;border:2px solid #e8e8e8;display:flex;align-items:center;justify-content:center;gap:5px;transition:all .18s;width:100%}.tbtn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.1)}.tbtn.eraser.on{background:#ff6b6b;color:#fff;border-color:#ff6b6b}.tbtn.clr{background:linear-gradient(135deg,var(--orange),var(--pink));color:#fff;border-color:transparent}.tbtn.save{background:linear-gradient(135deg,var(--purple),var(--teal));color:#fff;border-color:transparent}.tip-box{background:#f7f3ff;border-radius:12px;padding:10px;font-size:.74rem;color:#777;line-height:1.7;border:1.5px solid #ede4ff}.tip-box b{color:var(--purple)}#colorCanvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}#colorCursor{position:absolute;pointer-events:none;display:none;transform:translate(-50%,-50%);z-index:8}#colorCursor svg{display:block}#camPip{position:absolute;bottom:14px;right:14px;width:130px;height:98px;border-radius:12px;border:2px solid rgba(255,255,255,.35);box-shadow:0 4px 18px rgba(0,0,0,.4);z-index:6;transform:scaleX(-1)}.animal-grid{display:flex;flex-direction:column;gap:5px}.anim-btn{display:flex;align-items:center;gap:9px;padding:8px 11px;background:#fff;border:2.5px solid #e8e8e8;border-radius:12px;cursor:pointer;transition:all .2s cubic-bezier(.34, 1.56, .64, 1);font-family:Nunito,sans-serif;font-weight:900;font-size:.88rem;color:#555;width:100%;text-align:left}.anim-btn .em{font-size:1.4rem}.anim-btn:hover{border-color:var(--pink);color:var(--pink);transform:translateX(3px)}.anim-btn.sel{border-color:var(--purple);background:#f5f0ff;color:var(--purple)}.act-btn{font-family:'Fredoka One',cursive;font-size:.9rem;padding:9px 10px;border-radius:12px;cursor:pointer;border:none;color:#fff;width:100%;box-shadow:0 3px 10px rgba(0,0,0,.1);transition:all .18s;margin-bottom:5px}.act-btn:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.15)}.btn-reset{background:linear-gradient(135deg,var(--orange),var(--pink))}.btn-save{background:linear-gradient(135deg,var(--purple),var(--teal))}.tip-beian{margin-top:auto;color:grey;font-size:10px;text-align:center}.tip-beian a{font-weight:400;color:grey;text-decoration:none}.promo-card{background:#f7f3ff;border-radius:14px;padding:10px;border:2px solid #ede4ff;text-align:center}.promo-card-title{font-family:'Fredoka One',cursive;font-size:.95rem;color:var(--purple);margin-bottom:6px}.promo-card-img{width:100%;border-radius:10px;display:block;margin-bottom:8px}.promo-card-btn{font-family:'Fredoka One',cursive;background:linear-gradient(135deg,var(--purple),var(--teal));color:#fff;border:none;border-radius:10px;padding:7px 0;width:100%;cursor:pointer;font-size:.9rem}.promo-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:1000;align-items:center;justify-content:center}.promo-modal-box{background:#fff;border-radius:20px;padding:28px;width:38vw;max-width:70vw;max-height:90vh;overflow-y:auto;position:relative}.promo-close{position:absolute;top:14px;right:16px;background:0 0;border:none;font-size:1.4rem;cursor:pointer;color:#888}.promo-modal-box h2{font-family:'Fredoka One',cursive;color:var(--purple);margin-bottom:10px}.promo-modal-box p{color:#555;line-height:1.25;font-size:.85rem;font-weight:500;margin-bottom:10px}.promo-modal-img{width:100%;border-radius:12px;margin-bottom:14px;display:block}.promo-bottom{display:flex;gap:20px;background:#f7f3ff;border-radius:14px;padding:16px}.promo-code-label{font-size:.85rem;color:#aaa;font-weight:700;text-transform:uppercase;letter-spacing:0;padding:0 0 3px 5px}.promo-code-block{flex:1;display:flex;flex-direction:column;gap:8px}.promo-code-val{font-family:'Fredoka One',cursive;font-size:.8rem;color:var(--purple);letter-spacing:0}.promo-copy-btn{font-family:'Fredoka One',cursive;background:linear-gradient(135deg,var(--purple),var(--teal));color:#fff;border:none;border-radius:10px;padding:9px 0;cursor:pointer;font-size:.95rem;width:100%;z-index:999}.promo-qr{width:126px;height:126px;flex-shrink:0;border-radius:10px;object-fit:contain}.copy-toast{position:fixed;opacity:0;transition:opacity .3s;color:var(--green);font-weight:700;font-size:1rem;margin-top:-50px;margin-left:0;background:green;padding:10px 20px;border-radius:10px}.navHome {display: contents;font-size: .75rem;padding: 6px 20px;margin: auto 10px;transition: all .22s;}.navHome a {text-decoration: none;color: rgba(255, 255, 255, .75);margin: auto 10px;}