body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--warm-cream)}.app{min-height:100vh;background:linear-gradient(135deg,var(--pure-white) 0%,var(--warm-cream) 100%);padding:3rem 1rem}.header{max-width:1200px;margin:0 auto 4rem;display:flex;justify-content:space-between;align-items:flex-start;gap:2rem}.header-content{flex:1}.main-title{font-size:3.5rem;font-weight:700;color:var(--earth-brown-dark);margin-bottom:.5rem;letter-spacing:-.02em}.header-subtitle{font-size:1.25rem;color:var(--earth-green);font-weight:500;font-style:italic}.btn-google{padding:1rem 1.75rem;background:var(--pure-white);border:2px solid var(--earth-green);border-radius:50px;font-size:1rem;font-weight:600;color:var(--earth-green);cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .3s ease;box-shadow:0 2px 8px #6b8e2326}.btn-google:hover{background:var(--earth-green);color:var(--pure-white);transform:translateY(-2px);box-shadow:0 4px 16px #6b8e234d}.cards-container{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2.5rem}.card{background:var(--pure-white);border-radius:30px;overflow:hidden;transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:0 8px 24px #8b69141a;border:2px solid transparent}.card:not(.disabled):hover{transform:translateY(-8px) scale(1.02);box-shadow:0 16px 48px #8b691426;border-color:var(--earth-green)}.card.disabled{opacity:.5;cursor:not-allowed}.card-image-placeholder,.card-image-active{position:relative;height:220px;background:linear-gradient(135deg,var(--light-beige) 0%,var(--warm-cream) 100%);display:flex;align-items:center;justify-content:center}.card-image-active.premium{background:linear-gradient(135deg,var(--earth-green-light) 0%,var(--earth-green) 100%)}.lock-icon{font-size:4.5rem;opacity:.4;color:var(--earth-brown)}.robot-image{width:180px;height:180px;object-fit:contain;animation:friendlyFloat 4s ease-in-out infinite}@keyframes friendlyFloat{0%,to{transform:translateY(0) rotate(0)}25%{transform:translateY(-10px) rotate(2deg)}75%{transform:translateY(-5px) rotate(-2deg)}}.robot-image.premium-robot{filter:drop-shadow(0 0 30px rgba(255,215,0,.6))}.status-badge{position:absolute;top:1.25rem;right:1.25rem;padding:.625rem 1.25rem;background:var(--earth-green);color:#fff;border-radius:50px;font-size:.875rem;font-weight:600;box-shadow:0 4px 12px #6b8e234d}.status-badge.unavailable{background:var(--earth-brown)}.card-content{padding:2rem}.card-title{font-size:1.75rem;font-weight:700;color:var(--earth-brown-dark);margin-bottom:.75rem}.card-tag{display:inline-block;padding:.375rem 1rem;background:var(--cheerful-yellow);color:var(--earth-brown-dark);border-radius:50px;font-size:.875rem;font-weight:600;margin-bottom:1rem;box-shadow:0 2px 8px #ffd7004d}.card-requirement{color:var(--text-light);font-size:.9rem;margin-bottom:1rem;line-height:1.6}.card-stats{display:flex;gap:1.5rem;margin-bottom:1.5rem}.stat{display:flex;align-items:center;gap:.375rem;color:var(--text-light);font-size:.875rem;font-weight:600}.stat:before{content:"";width:10px;height:10px;border-radius:50%;background:var(--earth-green);animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.1)}}.card-button{width:100%;padding:1.125rem;background:linear-gradient(135deg,var(--earth-green) 0%,var(--earth-green-dark) 100%);color:#fff;border:none;border-radius:50px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #6b8e234d}.card-button:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 8px 20px #6b8e2366}.card-button:disabled{background:var(--earth-brown);cursor:not-allowed;box-shadow:none}.app-footer{max-width:1200px;margin:4rem auto 0;text-align:center;padding-top:3rem;border-top:2px solid var(--light-beige)}.app-footer p{color:var(--text-light);font-size:.95rem;font-style:italic}@media (max-width: 1024px){.header{flex-direction:column}.main-title{font-size:2.5rem}.cards-container{grid-template-columns:1fr}}@media (max-width: 640px){.app{padding:2rem 1rem}.main-title{font-size:2rem}.header-subtitle{font-size:1rem}.btn-google{width:100%;justify-content:center}.cards-container{gap:2rem}.card-image-placeholder,.card-image-active{height:180px}}:root{--earth-brown: #8B6914;--earth-brown-dark: #6B4E10;--earth-brown-light: #A68B3D;--earth-green: #6B8E23;--earth-green-dark: #556B2F;--earth-green-light: #9CAF5A;--cheerful-yellow: #FFD700;--cheerful-orange: #FF8C42;--pure-white: #FFFFFF;--warm-cream: #F5F0E8;--light-beige: #E8DDC5;--text-dark: #2C2416;--text-light: #6B6342}.room-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50}.room-modal-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#2c2416cc;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.room-modal-content{position:relative;height:100%;display:flex;align-items:center;justify-content:center;padding:1rem}.room-modal-inner{background:var(--pure-white);border-radius:30px;border:2px solid var(--light-beige);box-shadow:0 16px 48px #8b691433;max-width:500px;width:100%;overflow:hidden}.room-modal-header{position:relative;padding:2.5rem;text-align:center;background:linear-gradient(135deg,var(--pure-white) 0%,var(--warm-cream) 100%)}.room-modal-icon{width:80px;height:80px;margin:0 auto 1rem;animation:friendlyFloat 3s ease-in-out infinite}@keyframes friendlyFloat{0%,to{transform:translateY(0) rotate(0)}25%{transform:translateY(-8px) rotate(2deg)}75%{transform:translateY(-4px) rotate(-2deg)}}.room-modal-title{font-size:1.75rem;font-weight:700;color:var(--earth-brown-dark);margin:0 0 .5rem}.room-modal-subtitle{font-size:1rem;color:var(--earth-green);margin:0;font-style:italic}.room-modal-rooms{padding:1.5rem;display:flex;flex-direction:column;gap:1rem}.room-button{width:100%;display:flex;align-items:center;gap:1rem;padding:1.5rem;background:var(--warm-cream);border:2px solid var(--light-beige);border-radius:20px;color:var(--text-dark);text-align:left;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 12px #8b69141a}.room-button:hover{background:var(--light-beige);border-color:var(--earth-green);transform:translateY(-4px) scale(1.02);box-shadow:0 8px 24px #6b8e2340}.room-icon{font-size:2rem}.room-info{flex:1}.room-info h3{margin:0 0 .25rem;font-size:1.125rem;font-weight:700;color:var(--earth-brown-dark)}.room-info p{margin:0;font-size:.875rem;color:var(--text-light)}.room-badge{padding:.5rem 1rem;background:var(--earth-green);color:#fff;border-radius:50px;font-size:.75rem;font-weight:600;box-shadow:0 2px 8px #6b8e234d}.room-modal-cancel{width:100%;padding:1rem;background:var(--earth-brown);border:none;border-radius:50px;color:#fff;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;margin-top:1.5rem;box-shadow:0 2px 8px #6b8e2326}.room-modal-cancel:hover{background:var(--earth-brown-dark);transform:translateY(-2px);box-shadow:0 4px 16px #6b8e2340}:root{--earth-brown: #8B6914;--earth-brown-dark: #6B4E10;--earth-brown-light: #A68B3D;--earth-green: #6B8E23;--earth-green-dark: #556B2F;--earth-green-light: #9CAF5A;--cheerful-yellow: #FFD700;--cheerful-orange: #FF8C42;--pure-white: #FFFFFF;--white: #FFFFFF;--warm-cream: #F5F0E8;--light-beige: #E8DDC5;--text-dark: #2C2416;--text-light: #6B6342;--text-secondary: #64748B}.streaming-page{min-height:100vh;background:linear-gradient(135deg,var(--pure-white) 0%,var(--warm-cream) 100%);padding:0}.streaming-header{background:var(--white);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid rgba(107,142,35,.15);padding:2rem 3rem;display:flex;align-items:center;justify-content:space-between;gap:1.5rem}.header-actions{margin-left:auto;display:flex;align-items:center;gap:1rem}.header-ready-status{display:flex;align-items:center}.status-badge-header{padding:.5rem 1rem;border-radius:50px;font-size:.875rem;font-weight:600;display:inline-block}.status-badge-header.enabled{background:linear-gradient(135deg,var(--earth-green) 0%,var(--earth-green-light) 100%);color:var(--white);box-shadow:0 2px 8px #6b8e234d}.status-badge-header.disabled{background:linear-gradient(135deg,var(--earth-brown) 0%,var(--earth-brown-light) 100%);color:var(--white)}.back-button{padding:.875rem 1.75rem;background:var(--white);border:2px solid var(--earth-green);border-radius:50px;color:var(--earth-green);font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px #6b8e2326}.back-button:hover{background:var(--earth-green);color:var(--white);transform:translate(-4px) scale(1.02);box-shadow:0 4px 16px #6b8e2340}.streaming-title{font-size:1.75rem;font-weight:700;color:var(--earth-brown-dark);margin:0}.streaming-subtitle{font-size:.95rem;color:var(--text-secondary);margin:.25rem 0 0}.streaming-layout{display:flex;height:calc(100vh - 88px)}.main-video-area{flex:1;display:flex;flex-direction:column;position:relative}.video-container{flex:1;background:var(--light-beige);display:flex;align-items:center;justify-content:center}.video-placeholder{text-align:center;color:var(--earth-brown-dark);padding:3rem}.video-icon{font-size:5rem;margin-bottom:1rem;animation:float-icon 3s ease-in-out infinite}@keyframes float-icon{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.video-placeholder p{font-size:1.375rem;font-weight:600;margin:.75rem 0;color:var(--earth-brown-dark)}.room-badge-inline{display:inline-block;padding:.625rem 1.25rem;background:#6b8e2326;color:var(--earth-green);border-radius:50px;font-size:.875rem;font-weight:600}.status-overlay{position:absolute;top:1rem;left:1rem;background:var(--white);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:20px;padding:1.25rem;box-shadow:0 8px 24px #8b691426;border:2px solid var(--light-beige);display:flex;flex-direction:column;gap:.75rem}.status-item{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--text-dark);font-weight:500}.status-dot{width:10px;height:10px;border-radius:50%}.status-dot.online{background:var(--earth-green);animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.control-panel,.info-panel{width:384px;background:var(--white);border-left:2px solid var(--light-beige);overflow-y:auto;display:flex;flex-direction:column;box-shadow:-4px 0 24px #8b691414}.panel-header{padding:1.75rem;border-bottom:2px solid var(--light-beige);background:linear-gradient(135deg,var(--white) 0%,var(--warm-cream) 100%)}.panel-header h3{font-size:1.25rem;font-weight:700;color:var(--earth-brown-dark);margin:0 0 .375rem}.panel-header p{font-size:.875rem;color:var(--text-light);margin:0}.robot-selection{padding:1.75rem;border-bottom:2px solid var(--light-beige)}.robot-selection label{display:block;font-size:.75rem;color:var(--text-light);margin-bottom:.5rem;font-weight:600}.robot-select{width:100%;background:var(--warm-cream);border:2px solid var(--light-beige);border-radius:12px;padding:.875rem;color:var(--text-dark);font-size:.875rem;font-weight:500;transition:all .2s ease}.robot-select:hover{border-color:var(--earth-green)}.control-pad{padding:2rem;border-bottom:2px solid var(--light-beige)}.control-row{display:flex;justify-content:center;gap:.5rem;margin-bottom:.5rem}.control-btn{width:64px;height:64px;border-radius:.5rem;border:none;font-size:1.5rem;font-weight:700;cursor:pointer;transition:all .15s ease;display:flex;align-items:center;justify-content:center}.control-btn:disabled{opacity:.5;cursor:not-allowed}.up-btn,.down-btn,.left-btn,.right-btn{background:linear-gradient(135deg,var(--earth-green) 0%,var(--earth-green-dark) 100%);color:#fff}.fire-btn{background:linear-gradient(135deg,var(--cheerful-orange) 0%,#E6792A 100%);color:#fff;font-size:.875rem;font-weight:700}.up-btn:hover:not(:disabled),.down-btn:hover:not(:disabled),.left-btn:hover:not(:disabled),.right-btn:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 6px 16px #6b8e2366}.fire-btn:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 6px 16px #ff8c4266}.control-status{padding:1.75rem;border-bottom:2px solid var(--light-beige);text-align:center}.status-badge{display:inline-block;padding:.75rem 1.5rem;border-radius:50px;font-size:.875rem;font-weight:600}.status-badge.enabled{background:var(--earth-green);color:#fff;box-shadow:0 4px 12px #6b8e234d}.status-badge.disabled{background:var(--cheerful-orange);color:#fff;box-shadow:0 4px 12px #ff8c424d}.smart-contract-info{margin-top:1rem;display:flex;flex-direction:column;gap:.5rem}.contract-label{font-size:.75rem;color:#94a3b8}.contract-badge{font-size:.75rem;color:#10b981}.robot-status{padding:1.75rem}.robot-status h4{font-size:.875rem;font-weight:700;color:var(--earth-brown-dark);margin:0 0 1.25rem;text-transform:uppercase;letter-spacing:.5px}.robot-list{display:flex;flex-direction:column;gap:.5rem}.robot-item{background:var(--warm-cream);border-radius:12px;padding:1rem;border-left:4px solid transparent;display:flex;justify-content:space-between;align-items:center;transition:all .2s ease}.robot-item:hover{background:var(--light-beige)}.robot-item.active{border-left-color:var(--earth-green);box-shadow:0 2px 8px #6b8e2326}.robot-info{display:flex;align-items:center;gap:.75rem}.robot-indicator{width:12px;height:12px;border-radius:50%}.robot-indicator.idle{background:var(--earth-green);animation:pulse 2s ease-in-out infinite}.robot-info span{font-size:.875rem;color:var(--text-dark);font-weight:500}.active-badge{background:var(--cheerful-yellow);color:var(--earth-brown-dark);padding:.25rem .625rem;border-radius:20px;font-size:.75rem;font-weight:700;box-shadow:0 2px 6px #ffd7004d}.robot-details{font-size:.75rem;color:var(--text-light)}.robot-commands{padding:1.5rem;border-bottom:1px solid rgba(255,255,255,.1)}.robot-commands h4{font-size:.875rem;font-weight:700;color:var(--earth-brown-dark);margin:0 0 1.25rem;text-transform:uppercase;letter-spacing:.5px}.commands-log{background:var(--warm-cream);border-radius:12px;padding:1rem;height:192px;overflow-y:auto;border:2px solid var(--light-beige)}.no-commands{text-align:center;color:var(--text-light);font-size:.875rem;padding:2rem}.commands-list{display:flex;flex-direction:column;gap:.5rem}.command-item{font-size:.75rem}.command-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.25rem}.command-time{color:var(--text-light)}.command-status-indicators{display:flex;align-items:center;gap:.25rem}.status-dot-sent,.status-dot-acknowledged,.status-dot-failed{width:8px;height:8px;border-radius:50%}.status-dot-sent{background:#f59e0b}.status-dot-acknowledged{background:#10b981}.status-dot-failed{background:#ef4444}.status-text-sent,.status-text-acknowledged,.status-text-failed{font-size:.75rem}.status-text-sent{color:#f59e0b}.status-text-acknowledged{color:#10b981}.status-text-failed{color:#ef4444}.source-badge{padding:.125rem .375rem;border-radius:.25rem;font-size:.625rem;font-weight:600}.source-badge.websocket{background:#3b82f633;color:#60a5fa}.source-badge.blockchain{background:#8b5cf633;color:#a78bfa}.command-text{color:var(--text-dark);font-weight:500}.info-section{padding:1.5rem;border-bottom:1px solid rgba(255,255,255,.1)}.info-item{display:flex;justify-content:space-between;padding:.75rem 0;border-bottom:1px solid rgba(255,255,255,.05)}.info-item:last-child{border-bottom:none}.info-label{font-size:.875rem;color:#94a3b8}.info-value{font-size:.875rem;font-weight:600;color:#fff;display:flex;align-items:center;gap:.5rem}.viewers-info{padding:1.5rem}.viewers-info h4{font-size:.875rem;font-weight:600;color:#fff;margin:0 0 1rem}.viewers-count{text-align:center;padding:2rem}.viewer-count-number{display:block;font-size:3rem;font-weight:700;color:#3b82f6}.viewer-count-label{display:block;font-size:.875rem;color:#94a3b8;margin-top:.5rem}@media (max-width: 1024px){.streaming-layout{flex-direction:column}.control-panel,.info-panel{width:100%;max-height:50vh}}@media (max-width: 768px){.streaming-header{flex-direction:column;align-items:flex-start;gap:1rem}.streaming-title{font-size:1.25rem}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#333;background-color:#fff}#root{min-height:100vh}