@import"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap";:root{--bg-primary: #0b0f19;--bg-card: rgba(22, 28, 45, .6);--border-color: rgba(255, 255, 255, .08);--text-primary: #f8fafc;--text-secondary: #94a3b8;--color-purple: #8b5cf6;--color-purple-glow: rgba(139, 92, 246, .3);--color-teal: #06b6d4;--color-teal-glow: rgba(6, 182, 212, .3);--color-amber: #f59e0b;--color-amber-glow: rgba(245, 158, 11, .3);--color-rose: #ef4444;--color-rose-glow: rgba(239, 68, 68, .3)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Outfit,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:var(--bg-primary);color:var(--text-primary);min-height:100vh;display:flex;justify-content:center;align-items:center;overflow-x:hidden;background-image:radial-gradient(at 0% 0%,rgba(139,92,246,.12) 0px,transparent 50%),radial-gradient(at 100% 100%,rgba(6,182,212,.08) 0px,transparent 50%)}#app{width:100%;max-width:900px;padding:2.5rem 1.5rem}.app-header{text-align:center;margin-bottom:2.5rem}.app-header h1{font-size:2.75rem;font-weight:800;letter-spacing:-.05em;background:linear-gradient(135deg,#a78bfa,#06b6d4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:.5rem}.app-header p{color:var(--text-secondary);font-size:1.1rem;font-weight:300}.dashboard-grid{display:grid;grid-template-columns:1fr;gap:1.5rem;align-items:start}@media (min-width: 768px){.dashboard-grid{grid-template-columns:1.1fr 1.2fr}}.left-col{display:flex;flex-direction:column;gap:1.5rem}.card{background:var(--bg-card);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border-color);border-radius:20px;padding:1.75rem;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;gap:1.25rem}.card:hover{border-color:#ffffff1f;box-shadow:0 12px 30px #0000004d}.card-title-area h2{font-size:1.35rem;font-weight:600;margin-bottom:.5rem;display:flex;align-items:center;gap:.5rem}.card-title-area p{color:var(--text-secondary);font-size:.9rem;line-height:1.4}.form-group{display:flex;flex-direction:column;gap:.5rem}.form-label{font-size:.85rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.input-text{font-family:inherit;background:#0003;border:1px solid var(--border-color);border-radius:10px;padding:.75rem 1rem;color:var(--text-primary);font-size:.95rem;transition:all .2s ease;width:100%}.input-text:focus{outline:none;border-color:var(--color-purple);box-shadow:0 0 0 3px #8b5cf626}.segmented-group{display:flex;background:#00000040;border:1px solid var(--border-color);border-radius:12px;padding:.25rem}.segmented-btn{flex:1;background:transparent;border:none;color:var(--text-secondary);padding:.65rem;border-radius:9px;font-family:inherit;font-weight:600;font-size:.9rem;cursor:pointer;transition:all .2s ease;display:flex;justify-content:center;align-items:center;gap:.35rem}.segmented-btn.active{background:#ffffff1a;color:var(--text-primary);box-shadow:0 2px 10px #0003}.color-picker-container{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.color-dot{width:28px;height:28px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:all .2s ease;position:relative}.color-dot:hover{transform:scale(1.1)}.color-dot.active{border-color:var(--text-primary);box-shadow:0 0 10px currentColor}.custom-color-input-wrapper{position:relative;width:28px;height:28px;border-radius:50%;overflow:hidden;border:1px solid var(--border-color);cursor:pointer}.custom-color-input-wrapper input[type=color]{position:absolute;top:-5px;left:-5px;width:38px;height:38px;border:none;cursor:pointer;background:transparent}.ai-drawer{background:#00000026;border:1px dashed var(--border-color);border-radius:12px;padding:1.25rem;display:flex;flex-direction:column;gap:1rem}.hidden{display:none!important}.ai-drawer.hidden{display:none}.ai-generate-row{display:flex;gap:.5rem}.ai-preview-area{display:flex;justify-content:center;align-items:center;width:100%;min-height:120px;background:#0003;border-radius:10px;border:1px solid var(--border-color);position:relative;overflow:hidden}.ai-preview-img{width:100px;height:100px;border-radius:50%;object-fit:cover;border:2px solid var(--color-teal);box-shadow:0 0 15px var(--color-teal-glow)}.btn{font-family:inherit;font-weight:600;font-size:.95rem;padding:.8rem 1.25rem;border-radius:12px;border:none;cursor:pointer;transition:all .2s ease;display:inline-flex;justify-content:center;align-items:center;gap:.5rem;width:100%}.btn:disabled{opacity:.4;cursor:not-allowed}.btn.primary{background:linear-gradient(135deg,var(--color-purple) 0%,#7c3aed 100%);color:#fff;box-shadow:0 4px 15px var(--color-purple-glow)}.btn.primary:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 6px 20px #8b5cf680}.btn.secondary{background:#ffffff0f;border:1px solid rgba(255,255,255,.1);color:var(--text-primary)}.btn.secondary:not(:disabled):hover{background:#ffffff1f}.btn.warn{background:linear-gradient(135deg,var(--color-amber) 0%,#d97706 100%);color:#fff;box-shadow:0 4px 15px var(--color-amber-glow)}.btn.warn:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 6px 20px #f59e0b80}.btn.success{background:linear-gradient(135deg,var(--color-teal) 0%,#0891b2 100%);color:#fff;box-shadow:0 4px 15px var(--color-teal-glow)}.btn.success:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 6px 20px #06b6d480}.button-group{display:flex;flex-direction:column;gap:.75rem}.status-container{display:flex;align-items:center;gap:.6rem}.status-indicator{font-size:.85rem;font-weight:600;display:inline-flex;align-items:center;gap:.4rem}.status-indicator:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%}.status-indicator.inactive{color:var(--text-secondary)}.status-indicator.inactive:before{background-color:#64748b;box-shadow:0 0 8px #64748b80}.status-indicator.active{color:var(--color-teal)}.status-indicator.active:before{background-color:var(--color-teal);box-shadow:0 0 8px var(--color-teal);animation:pulse 1.5s infinite alternate}.spinner{width:24px;height:24px;border:3px solid rgba(255,255,255,.1);border-top-color:var(--color-teal);border-radius:50%;animation:spin .8s linear infinite}.ai-status-text{font-size:.85rem;color:var(--text-secondary)}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%{opacity:.5}to{opacity:1}}body.pip-body{margin:0;padding:0;width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;background-color:#0b0f19;font-family:Outfit,sans-serif;overflow:hidden;color:#f8fafc;transition:background .4s cubic-bezier(.4,0,.2,1),color .4s cubic-bezier(.4,0,.2,1)}.pip-container{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;position:relative;padding:1rem .5rem .5rem}.speech-bubble{position:absolute;top:10px;background:#fffffff5;color:#0f172a;padding:.5rem .85rem;border-radius:14px;font-size:.85rem;font-weight:600;max-width:90%;text-align:center;box-shadow:0 6px 15px #00000059;animation:scaleUp .3s cubic-bezier(.175,.885,.32,1.275) forwards;z-index:10}.speech-bubble.hidden{display:none}.speech-bubble:after{content:"";position:absolute;bottom:-5px;left:50%;transform:translate(-50%);border-width:5px 5px 0;border-style:solid;border-color:rgba(255,255,255,.96) transparent;display:block;width:0}.pet-avatar-wrapper{width:120px;height:120px;display:flex;justify-content:center;align-items:center;position:relative}.pet-ai-image{width:120px;height:120px;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(0,0,0,.4))}.pet-name-tag{margin-top:.5rem;font-size:.9rem;font-weight:600;color:var(--text-secondary);background:#ffffff0d;padding:.25rem .75rem;border-radius:20px;border:1px solid rgba(255,255,255,.08);max-width:90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .4s ease,border-color .4s ease,color .4s ease}.pet-idle{animation:float 3.5s ease-in-out infinite}.shake-animation{animation:shake .4s ease-in-out infinite}.dance-animation{animation:dance .65s ease-in-out infinite}@keyframes float{0%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(.5deg)}to{transform:translateY(0) rotate(0)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-4px) rotate(-2deg)}75%{transform:translate(4px) rotate(2deg)}}@keyframes dance{0%,to{transform:translateY(0) scaleY(1)}30%{transform:scaleY(.88)}50%{transform:translateY(-16px) scaleY(1.03) rotate(3deg)}70%{transform:translateY(-16px) scaleY(1.03) rotate(-3deg)}90%{transform:translateY(0) scaleY(1.01)}}@keyframes scaleUp{0%{transform:scale(.8) translate(-50%);opacity:0;transform-origin:bottom center}to{transform:scale(1) translate(-50%);opacity:1;transform-origin:bottom center}}#transcript-log::-webkit-scrollbar{width:6px}#transcript-log::-webkit-scrollbar-track{background:transparent}#transcript-log::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:3px;transition:background .2s ease}#transcript-log::-webkit-scrollbar-thumb:hover{background:#fff3}.switch{position:relative;display:inline-block;width:44px;height:24px}.switch input{opacity:0;width:0;height:0}.switch .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#00000040;border:1px solid var(--border-color);transition:.3s;border-radius:24px}.switch .slider:before{position:absolute;content:"";height:16px;width:16px;left:3px;bottom:3px;background-color:var(--text-secondary);transition:.3s;border-radius:50%}.switch input:checked+.slider{background-color:var(--color-purple);border-color:#8b5cf64d}.switch input:checked+.slider:before{transform:translate(20px);background-color:#fff}.pip-stars-container{position:absolute;top:8px;right:12px;display:flex;gap:4px;font-size:1.25rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));z-index:15;transition:all .3s ease}.star-icon{color:#fbbf24;animation:starBounce .4s cubic-bezier(.175,.885,.32,1.275) forwards}@keyframes starBounce{0%{transform:scale(0);opacity:0}50%{transform:scale(1.4)}to{transform:scale(1);opacity:1}}.timer-bar-container{width:85%;display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:.5rem;z-index:15}.timer-bar-container.hidden{display:none}.timer-text{font-size:1.15rem;font-weight:800;font-family:monospace;letter-spacing:.05em;color:var(--pet-color, var(--color-teal));text-shadow:0 0 8px rgba(6,182,212,.3)}.timer-bar-bg{width:100%;height:6px;background:#ffffff14;border-radius:3px;overflow:hidden;border:1px solid rgba(255,255,255,.05)}.timer-bar-fill{height:100%;width:100%;background:var(--pet-color, var(--color-teal));border-radius:3px;box-shadow:0 0 8px var(--pet-color, var(--color-teal));transition:width .35s linear}.pet-breathing-inhale{animation:breatheIn 4s cubic-bezier(.4,0,.2,1) forwards}.pet-breathing-hold{transform:scale(1.25);transition:transform .3s ease}.pet-breathing-exhale{animation:breatheOut 4s cubic-bezier(.4,0,.2,1) forwards}@keyframes breatheIn{0%{transform:scale(1)}to{transform:scale(1.25)}}@keyframes breatheOut{0%{transform:scale(1.25)}to{transform:scale(1)}}.remote-view{width:100vw;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:1rem;background-color:var(--bg-primary);background-image:radial-gradient(at 0% 0%,rgba(139,92,246,.15) 0px,transparent 50%),radial-gradient(at 100% 100%,rgba(6,182,212,.1) 0px,transparent 50%);overflow-y:auto;position:absolute;top:0;left:0;z-index:100}.remote-view.hidden{display:none!important}.remote-grid{width:100%;max-width:500px}#remote-qr-container img{display:block}.eating-active[data-pet-type=cat] .pet-mouth{transform:scaleY(4) translateY(.5px);transform-origin:50% 44px;transition:transform .3s ease-out}.eating-active[data-pet-type=owl] .pet-beak{transform:translateY(2.5px) scaleY(1.3);transform-origin:50% 46px;transition:transform .3s ease-out}.eating-active[data-pet-type=robot] .pet-mouth{transform:scaleY(4);transform-origin:50% 43px;transition:transform .3s ease-out}.eating-active[data-pet-type=panda] .pet-mouth{transform:scaleY(4.5) translateY(.3px);transform-origin:50% 49px;transition:transform .3s ease-out}.eating-chomp{animation:aiPetChomp .8s cubic-bezier(.25,1,.5,1) forwards}@keyframes aiPetChomp{0%{transform:scale(1) translateY(0)}30%{transform:scale(.9,1.15) translateY(-8px)}60%{transform:scale(1.2,.8) translateY(4px)}80%{transform:scale(.95,1.05) translateY(-2px)}to{transform:scale(1) translateY(0)}}.flying-star{position:absolute;font-size:1.6rem;z-index:100;pointer-events:none;filter:drop-shadow(0 0 8px rgba(251,191,36,.8));animation:flyToPet 1.2s cubic-bezier(.25,1,.5,1) forwards}@keyframes flyToPet{0%{top:8px;left:calc(100% - 30px);transform:scale(.5) rotate(0);opacity:0}20%{opacity:1;transform:scale(1.4) rotate(45deg)}to{top:45%;left:50%;transform:translate(-50%,-50%) scale(0) rotate(360deg);opacity:0}}.pet-cartoon-mouth{position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);width:22px;height:14px;background-color:#0b0f19;border-radius:50%;border:2px solid #f43f5e;z-index:25;pointer-events:none;opacity:0;transition:all .3s ease-out}.pet-cartoon-mouth.mouth-open{opacity:1;width:24px;height:24px;border-radius:50%;background-color:#1e1b4b;border-color:#f43f5e}.pet-cartoon-mouth.mouth-closed{opacity:1;width:16px;height:2px;border-radius:0;background-color:#f8fafc;border:none}.star-particle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.5);font-size:.9rem;pointer-events:none;z-index:90;animation:particleOut .8s cubic-bezier(.1,.8,.3,1) forwards}@keyframes particleOut{0%{transform:translate(-50%,-50%) scale(.2);opacity:1}to{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(1.2) rotate(180deg);opacity:0}}.style-presets{margin-bottom:.5rem}.style-preset-badge{font-size:.72rem;background:#ffffff0d;border:1px solid rgba(255,255,255,.08);padding:.25rem .55rem;border-radius:20px;color:var(--text-secondary);cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);-webkit-user-select:none;user-select:none}.style-preset-badge:hover{background:#ffffff1f;color:var(--text-primary);border-color:#fff3}.style-preset-badge.active{background:var(--color-purple);color:#fff;border-color:var(--color-purple);box-shadow:0 0 10px var(--color-purple-glow)}.pet-sleepy{animation:sleepBob 4s ease-in-out infinite}@keyframes sleepBob{0%,to{transform:translateY(0) scaleY(1);opacity:.85}50%{transform:translateY(3px) scaleY(.96);opacity:.6}}.pet-sleepy:after{content:"Zzz";position:absolute;top:-15px;right:5px;font-size:.85rem;font-weight:700;color:var(--color-teal);opacity:0;animation:sleepZzz 3.5s linear infinite}@keyframes sleepZzz{0%{transform:translate(0) scale(.6);opacity:0}30%{opacity:.8}to{transform:translate(18px,-28px) scale(1.1);opacity:0}}.pet-sleepy svg .pet-eye-pupil{display:none!important}.pet-sleepy svg .pet-eye{transform:scaleY(.12);fill:#94a3b8!important}.pet-sleepy svg circle.pet-eye{transform-origin:50% 36px}.pet-sleepy svg circle.pet-eye[cx="39"]{transform-origin:39px 40px}.pet-sleepy svg circle.pet-eye[cx="61"]{transform-origin:61px 40px}.pet-sleepy svg circle.pet-eye[cx="43"]{transform-origin:43px 38px}.pet-sleepy svg circle.pet-eye[cx="57"]{transform-origin:57px 38px}.pet-sleepy .pet-ai-image{opacity:.65;filter:grayscale(.2) drop-shadow(0 4px 6px rgba(0,0,0,.3))}.pet-focused{animation:float 3.5s ease-in-out infinite}.pet-focused:after{content:"📚";position:absolute;bottom:0;right:2px;font-size:1.35rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));animation:bookSway 2.5s ease-in-out infinite}@keyframes bookSway{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(6deg)}}