body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.login-container{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;justify-content:center;min-height:100vh;padding:20px}.login-card{background:#fff;border-radius:12px;box-shadow:0 15px 35px #0000001a;max-width:400px;padding:40px;width:100%}.login-header{margin-bottom:30px;text-align:center}.login-header h1{color:#333;font-size:2rem;font-weight:600;margin:0 0 10px}.login-header p{color:#666;font-size:.9rem;margin:0}.login-form{margin-bottom:30px}.form-group{margin-bottom:20px}.form-group label{color:#333;display:block;font-weight:500;margin-bottom:5px}.form-group input{border:2px solid #e1e5e9;border-radius:8px;box-sizing:border-box;font-size:1rem;padding:12px;transition:border-color .3s ease;width:100%}.form-group input:focus{border-color:#667eea;outline:none}.form-group input:disabled{background-color:#f8f9fa;cursor:not-allowed}.error-message{background-color:#fee;border:1px solid #fcc;border-radius:8px;color:#c33;font-size:.9rem;margin-bottom:20px;padding:15px;text-align:left}.error-details{border-top:1px solid #fcc;margin-top:15px;padding-top:15px}.error-details p{font-size:.85rem;margin:0 0 10px}.error-details ul{margin:0;padding-left:20px}.error-details li{color:#a33;font-size:.8rem;margin-bottom:5px}.error-details code{background-color:#f5f5f5;border-radius:3px;color:#333;font-family:Courier New,monospace;font-size:.75rem;padding:2px 4px}.login-button{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:1rem;font-weight:600;padding:12px;transition:transform .2s ease,box-shadow .2s ease;width:100%}.login-button:hover:not(:disabled){box-shadow:0 8px 25px #00000026;transform:translateY(-2px)}.login-button:disabled{box-shadow:none;cursor:not-allowed;opacity:.7;transform:none}.login-footer{border-top:1px solid #e1e5e9;padding-top:20px;text-align:center}.login-footer p{color:#666;font-size:.9rem;margin:0 0 10px}.test-accounts{display:flex;flex-direction:column;gap:5px}.test-accounts div{color:#888;font-size:.8rem}.test-accounts strong{color:#333}.dashboard-container{background-color:#f8f9fa;min-height:100vh}.dashboard-header{background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 2px 10px #0000001a;color:#fff;padding:20px 0}.header-content{align-items:center;display:flex;justify-content:space-between;margin:0 auto;max-width:1200px;padding:0 20px}.header-content h1{font-size:1.8rem;font-weight:600;margin:0}.user-menu{align-items:center;display:flex;gap:15px}.connection-led{animation:pulse-green 2s infinite;background-color:#28a745;border-radius:50%;box-shadow:0 0 8px #28a74599;cursor:help;height:12px;width:12px}@keyframes pulse-green{0%{box-shadow:0 0 8px #28a74599}50%{box-shadow:0 0 15px #28a745cc}to{box-shadow:0 0 8px #28a74599}}.user-profile-container{position:relative}.user-info{font-size:1rem}.user-info.clickable{border-radius:4px;cursor:pointer;margin:-4px -8px;padding:4px 8px;transition:opacity .3s ease}.user-info.clickable:hover{background:#ffffff1a;opacity:.8}.profile-dropdown-overlay{background:#0000;bottom:0;left:0;position:fixed;right:0;top:0;z-index:998}.profile-dropdown{animation:dropdownFadeIn .2s ease-out;background:#fff;border:1px solid #e9ecef;border-radius:12px;box-shadow:0 8px 25px #00000026;margin-top:10px;min-width:300px;position:absolute;right:0;top:100%;z-index:999}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.profile-header{align-items:center;border-bottom:1px solid #e9ecef;display:flex;justify-content:space-between;padding:20px 20px 15px}.profile-header h4{color:#333;font-size:1.1rem;margin:0}.close-btn{align-items:center;background:none;border:none;border-radius:4px;color:#666;cursor:pointer;display:flex;font-size:1.5rem;height:24px;justify-content:center;padding:0;transition:background-color .3s ease;width:24px}.close-btn:hover{background:#f8f9fa;color:#333}.profile-details{padding:15px 20px 20px}.profile-item{align-items:center;border-bottom:1px solid #f8f9fa;display:flex;justify-content:space-between;padding:8px 0}.profile-item:last-child{border-bottom:none}.profile-item label{color:#495057;font-size:.9rem;font-weight:600;min-width:120px}.profile-item span{color:#333;flex:1 1;font-size:.9rem;text-align:right}.qbox-menu-container{align-items:center;display:flex}.qbox-menu-button{background:#fff3!important;border:2px solid #ffffff4d!important;border-radius:6px!important;font-size:.9rem!important;padding:8px 16px!important}.qbox-menu-button,.qbox-menu-button:hover{box-shadow:none!important;transform:none!important}.qbox-menu-button:hover{background:#ffffff4d!important;border-color:#ffffff80!important}.logout-button{background:#fff3;border:2px solid #ffffff4d;border-radius:6px;color:#fff;cursor:pointer;font-size:.9rem;padding:8px 16px;transition:all .3s ease}.logout-button:hover{background:#ffffff4d;border-color:#ffffff80}.dashboard-main{margin:0 auto;max-width:1200px;padding:40px 20px}.welcome-section{margin-bottom:40px;text-align:center}.welcome-section h2{color:#333;font-size:2rem;margin-bottom:10px}.welcome-section p{color:#666;font-size:1.1rem;margin:0 auto;max-width:600px}.info-cards{grid-gap:30px;display:grid;gap:30px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-bottom:40px}.info-card{background:#fff;border-radius:12px;box-shadow:0 4px 15px #0000001a;padding:30px;transition:transform .3s ease,box-shadow .3s ease}.info-card:hover{box-shadow:0 8px 25px #00000026;transform:translateY(-5px)}.info-card h3{border-bottom:2px solid #e9ecef;color:#333;font-size:1.3rem;margin-bottom:20px;padding-bottom:10px}@media (max-width:768px){.header-content{flex-direction:column;gap:15px;text-align:center}.header-content h1{font-size:1.5rem}.info-cards{grid-template-columns:1fr}.endpoint{align-items:flex-start;flex-direction:column;gap:10px}.endpoint code{width:100%}}.piece-search{width:100%}.piece-search-panel{background:#fff;border-radius:12px;box-shadow:0 4px 15px #0000001a;margin:0 auto;max-width:800px;padding:30px}.piece-search-panel h3{align-items:center;border-bottom:2px solid #e9ecef;color:#333;display:flex;font-size:1.3rem;margin-bottom:20px;padding-bottom:10px}.piece-search-panel h3:before{content:"🔍";margin-right:10px}.search-form{margin-bottom:20px}.search-input-group{display:flex;flex-wrap:wrap;gap:10px}.search-input{border:2px solid #e9ecef;border-radius:8px;flex:1 1;font-size:1rem;min-width:200px;padding:12px 16px;transition:border-color .3s ease}.search-input:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a;outline:none}.search-input:disabled{background-color:#f8f9fa;cursor:not-allowed}.search-button{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:1rem;padding:12px 24px;transition:opacity .3s ease,transform .2s ease;white-space:nowrap}.search-button:hover:not(:disabled){opacity:.9;transform:translateY(-1px)}.search-button:disabled{cursor:not-allowed;opacity:.6;transform:none}.clear-button{background:#6c757d;border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:1rem;padding:12px 20px;transition:background-color .3s ease,transform .2s ease;white-space:nowrap}.clear-button:hover:not(:disabled){background:#5a6268;transform:translateY(-1px)}.clear-button:disabled{cursor:not-allowed;opacity:.6}.search-result{animation:fadeIn .3s ease-in;border:2px solid #e9ecef;border-radius:8px;margin-top:20px;padding:20px}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.error-result{align-items:center;background:#fff5f5;border-color:#dc3545;display:flex;gap:10px;justify-content:center}.error-result .error-icon{font-size:1.2rem}.error-result p{color:#dc3545;font-weight:500;margin:0}.success-result{background:#f8fff9;border-color:#28a745}.piece-header{flex-wrap:wrap;gap:10px;justify-content:space-between;margin-bottom:20px}.piece-header,.piece-header h4{align-items:center;display:flex}.piece-header h4{color:#28a745;margin:0}.piece-header h4:before{align-items:center;background:#28a745;border-radius:50%;color:#fff;content:"✓";display:flex;font-size:12px;height:20px;justify-content:center;margin-right:8px;width:20px}.status-badge{border-radius:20px;font-size:.9rem;font-weight:500;letter-spacing:.5px;padding:6px 12px;text-transform:uppercase}.status-authenticated{background:#d4edda;border:1px solid #c3e6cb;color:#155724}.status-pending{background:#fff3cd;border:1px solid #ffeaa7;color:#856404}.status-rejected{background:#f8d7da;border:1px solid #f1aeb5;color:#721c24}.piece-info-grid{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.info-item{display:flex;flex-direction:column;gap:5px}.info-item.full-width{grid-column:1/-1}.info-item label{color:#495057;font-size:.9rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase}.info-item span{background:#f8f9fa;border:1px solid #dee2e6;border-radius:6px;color:#333;font-size:1rem;padding:8px 12px}.piece-id{background:#e9ecef!important;color:#495057!important;font-family:Courier New,monospace;font-weight:700}@media (max-width:768px){.search-input-group{flex-direction:column}.search-input{min-width:auto}.piece-header{align-items:flex-start;flex-direction:column}.piece-info-grid{grid-template-columns:1fr}.info-item.full-width{grid-column:1}}@media (max-width:480px){.piece-search-panel{padding:20px}.clear-button,.search-button{font-size:.9rem;padding:10px 16px}}.connection-status-banner{animation:slideDown .3s ease-out;background:linear-gradient(135deg,#ff6b6b,#ee5a24);box-shadow:0 2px 10px #0003;color:#fff;left:0;position:fixed;right:0;top:0;z-index:1000}.connection-status-content{align-items:center;display:flex;gap:15px;margin:0 auto;max-width:1200px;padding:15px 20px}.status-icon{flex-shrink:0;font-size:1.5rem}.status-message{flex:1 1}.status-message h3{font-size:1rem;font-weight:600;margin:0 0 5px}.status-message p{font-size:.9rem;margin:0 0 10px;opacity:.9}.status-actions{align-items:center;display:flex;gap:10px}.retry-button{align-items:center;background:#fff3;border:1px solid #ffffff4d;border-radius:6px;color:#fff;cursor:pointer;display:inline-flex;font-size:.8rem;gap:5px;padding:6px 12px;text-decoration:none;transition:all .3s ease}.retry-button:hover{background:#ffffff4d;border-color:#ffffff80}.server-link{align-items:center;background:#ffffff1a;border:1px solid #fff3;border-radius:6px;color:#fff;display:inline-flex;font-size:.8rem;gap:5px;padding:6px 12px;text-decoration:none;transition:all .3s ease}.server-link:hover{background:#fff3;border-color:#fff6;color:#fff}@keyframes slideDown{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@media (max-width:768px){.connection-status-content{align-items:flex-start;flex-direction:column;text-align:left}.status-actions{justify-content:flex-start;width:100%}.retry-button,.server-link{flex:1 1;justify-content:center;text-align:center}}.App{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.loading-container{align-items:center;background-color:#f8f9fa;display:flex;flex-direction:column;justify-content:center;min-height:100vh}.loading-spinner{animation:spin 1s linear infinite;border:4px solid #e9ecef;border-radius:50%;border-top-color:#667eea;height:40px;margin-bottom:15px;width:40px}.loading-container p{color:#666;font-size:1.1rem;margin:0}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}*{box-sizing:border-box}body{margin:0;padding:0}