*{box-sizing:border-box}
html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#000;color:#fff;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
[hidden]{display:none!important}

body{background:radial-gradient(circle at 50% 30%,#0c2544 0,#02060c 60%,#000 100%)}

.login,.app{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px}

/* Login UI */
.card{width:min(90vw,400px);padding:30px;background:rgba(10,25,47,.8);border:1px solid rgba(103,232,249,.2);border-radius:24px;text-align:center;backdrop-filter:blur(10px)}
.logo{width:80px;height:80px;margin:0 auto 20px;background:linear-gradient(135deg,#67e8f9,#0284c7);border-radius:50%;display:grid;place-items:center;font-size:40px;font-weight:900;color:#000;box-shadow:0 0 30px rgba(103,232,249,.4)}
h1{margin:0 0 10px;font-size:32px;letter-spacing:-1px}
input{width:100%;padding:14px;margin:15px 0;background:rgba(0,0,0,.5);border:1px solid rgba(103,232,249,.3);border-radius:12px;color:#fff;font-size:16px;outline:none}
button.primary{width:100%;padding:14px;background:#67e8f9;border:0;border-radius:12px;color:#000;font-size:16px;font-weight:700;cursor:pointer}
.error{margin-top:10px;color:#fca5a5;font-size:14px}

/* Voice App UI */
.voice-container{width:100%;max-width:600px;display:flex;flex-direction:column;align-items:center;gap:30px}

.orb-wrapper{position:relative;width:180px;height:180px;cursor:pointer;display:grid;place-items:center;transition:transform 0.3s ease}
.orb-wrapper:active{transform:scale(0.95)}
.orb-core{width:100px;height:100px;background:radial-gradient(circle at 30% 30%,#fff,#67e8f9 40%,#0284c7 100%);border-radius:50%;box-shadow:0 0 50px rgba(103,232,249,0.8);z-index:2}
.orb-ring{position:absolute;width:100%;height:100%;border:2px solid #67e8f9;border-radius:50%;opacity:0.3;animation:pulse 2s infinite ease-out}
.orb-ring.delay{animation-delay:1s}

@keyframes pulse{
  0%{transform:scale(0.8);opacity:0.6}
  100%{transform:scale(1.5);opacity:0}
}

/* States */
.app.listening .orb-ring{border-color:#f87171;animation-duration:1s;opacity:0.8}
.app.listening .orb-core{background:radial-gradient(circle at 30% 30%,#fff,#f87171 40%,#b91c1c 100%);box-shadow:0 0 50px rgba(248,113,113,0.8)}

.app.thinking .orb-core{animation:rotate 2s infinite linear}
@keyframes rotate{
  from{transform:rotate(0deg) scale(1)}
  50%{transform:rotate(180deg) scale(1.1)}
  to{transform:rotate(360deg) scale(1)}
}

.status-text{font-size:18px;color:#bae6fd;text-align:center;min-height:24px;font-weight:500}
.transcript{color:rgba(255,255,255,0.6);font-style:italic;max-width:80%;text-align:center}
.answer-box{width:90%;padding:20px;background:rgba(103,232,249,0.1);border-radius:16px;border:1px solid rgba(103,232,249,0.2);line-height:1.6;font-size:17px;max-height:30vh;overflow-y:auto}

.fallback-input{position:fixed;bottom:30px;width:90%;max-width:500px;display:flex;gap:10px}
.fallback-input input{margin:0;flex:1;background:rgba(255,255,255,0.05)}
.fallback-input button{width:50px;height:50px;border-radius:12px;background:rgba(103,232,249,0.2);border:1px solid rgba(103,232,249,0.3);color:#67e8f9;cursor:pointer;font-size:20px}