*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{color:#1a1a1a;background:#e8eaed;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.page{flex-direction:column;height:100%;display:flex}.top-bar{color:#fff;background:#1a1a2e;flex-shrink:0;justify-content:space-between;align-items:center;padding:10px 20px;display:flex}.brand{align-items:baseline;gap:10px;display:flex}.brand-name{letter-spacing:-.02em;font-size:1.1rem;font-weight:700}.brand-tag{color:#8b8fa3;font-size:.8rem}.demo-nav{gap:8px;display:flex}.demo-link{color:#8b8fa3;border-radius:4px;padding:4px 10px;font-size:.8rem;text-decoration:none;transition:all .2s}.demo-link:hover{color:#fff;background:#ffffff1a}.demo-link.active{color:#fff;background:#ffffff26;font-weight:600}.log-toggle{color:#ccc;cursor:pointer;background:#ffffff1a;border:1px solid #ffffff26;border-radius:4px;padding:5px 14px;font-size:.75rem}.log-toggle:hover{color:#fff;background:#ffffff2e}.content{flex:1;justify-content:center;align-items:stretch;min-height:0;padding:20px;display:flex}.widget-area{flex-direction:column;width:100%;max-width:520px;min-height:0;display:flex}.log-drawer{z-index:1000;background:#1e1e1e;border-top:2px solid #333;flex-direction:column;max-height:240px;display:flex;position:fixed;bottom:0;left:0;right:0}.log-drawer-header{color:#aaa;border-bottom:1px solid #333;flex-shrink:0;justify-content:space-between;align-items:center;padding:6px 12px;font-size:.75rem;font-weight:600;display:flex}.log-drawer-actions{gap:6px;display:flex}.btn-small{cursor:pointer;color:#999;background:0 0;border:1px solid #555;border-radius:3px;padding:2px 8px;font-size:.7rem}.btn-small:hover{color:#ccc;background:#333}.log-panel{color:#d4d4d4;flex:1;padding:6px 12px;font-family:SF Mono,Fira Code,monospace;font-size:.7rem;overflow-y:auto}.log-entry{word-break:break-word;border-bottom:1px solid #2a2a2a;gap:8px;padding:2px 0;display:flex}.log-time{color:#666;flex-shrink:0}.log-tag{flex-shrink:0;width:5em;font-weight:600}.log-msg{flex:1}.log-info .log-tag{color:#60a5fa}.log-error .log-tag{color:#f87171}.log-message .log-tag{color:#34d399}.log-cors .log-tag{color:#fbbf24}.qr-page{background:#f5f5f5;flex-direction:column;height:100%;display:flex}.qr-header{background:#fff;border-bottom:1px solid #e0e0e0;flex-shrink:0;justify-content:space-between;align-items:center;padding:12px 20px;display:flex}.qr-header-left{align-items:center;gap:12px;display:flex}.qr-header-name{color:#1a1a1a;font-size:1.1rem;font-weight:700}.qr-header-type{color:#666;background:#f0f0f0;border-radius:10px;padding:2px 8px;font-size:.75rem}.qr-header-right{align-items:center;gap:10px;display:flex}.lang-select{appearance:none;cursor:pointer;color:#333;background:#f5f5f5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%23666' stroke-width='1.5'/%3E%3C/svg%3E") right 8px center no-repeat;border:1px solid #ddd;border-radius:6px;padding:6px 28px 6px 10px;font-size:.85rem}.lang-select:focus{outline-offset:-1px;outline:2px solid #4a90d9}.auth-btn{cursor:pointer;color:#333;background:#fff;border:1px solid #ddd;border-radius:6px;padding:6px 14px;font-size:.85rem;transition:background .15s}.auth-btn:hover{background:#f0f0f0}.auth-user{color:#333;align-items:center;gap:8px;font-size:.85rem;display:flex}.auth-user-avatar{color:#fff;background:#4a90d9;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;font-size:.75rem;font-weight:600;display:flex}.auth-signout{color:#999;cursor:pointer;background:0 0;border:none;padding:2px 6px;font-size:.75rem}.auth-signout:hover{color:#666}.qr-initial-text{text-align:center;color:#555;width:100%;max-width:520px;margin:0 auto;padding:12px 20px 0;font-size:.9rem}.chips-bar{flex-wrap:wrap;justify-content:center;gap:8px;width:100%;max-width:520px;margin:0 auto;padding:12px 20px;display:flex}.chip{cursor:pointer;color:#333;white-space:nowrap;background:#fff;border:1px solid #d0d7de;border-radius:18px;padding:8px 16px;font-size:.85rem;transition:all .15s}.chip:hover{color:#1a73e8;background:#e8f0fe;border-color:#4a90d9}.chip:active{background:#d2e3fc}.qr-content{flex:1;justify-content:center;align-items:stretch;min-height:0;padding:0 20px 20px;display:flex}.qr-widget-area{flex-direction:column;width:100%;max-width:520px;min-height:0;display:flex}.auth-overlay{z-index:9999;background:#0006;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.auth-modal{background:#fff;border-radius:12px;width:380px;max-width:90vw;padding:32px;box-shadow:0 8px 32px #00000026}.auth-modal h2{color:#1a1a1a;margin-bottom:20px;font-size:1.25rem}.auth-modal-close{float:right;cursor:pointer;color:#999;background:0 0;border:none;padding:0 4px;font-size:1.2rem}.auth-divider{color:#999;align-items:center;gap:12px;margin:16px 0;font-size:.8rem;display:flex}.auth-divider:before,.auth-divider:after{content:"";background:#e0e0e0;flex:1;height:1px}.auth-form{flex-direction:column;gap:12px;display:flex}.auth-input{border:1px solid #ddd;border-radius:6px;width:100%;padding:10px 12px;font-size:.9rem}.auth-input:focus{outline-offset:-1px;border-color:#4a90d9;outline:2px solid #4a90d9}.auth-submit{color:#fff;cursor:pointer;background:#4a90d9;border:none;border-radius:6px;width:100%;padding:10px;font-size:.9rem;font-weight:600;transition:background .15s}.auth-submit:hover{background:#3a7bc8}.auth-submit:disabled{cursor:not-allowed;background:#b0c4de}.auth-google{color:#333;cursor:pointer;background:#fff;border:1px solid #ddd;border-radius:6px;justify-content:center;align-items:center;gap:8px;width:100%;padding:10px;font-size:.9rem;font-weight:500;transition:background .15s;display:flex}.auth-google:hover{background:#f5f5f5}.auth-google svg{width:18px;height:18px}.auth-toggle{text-align:center;color:#666;margin-top:4px;font-size:.8rem}.auth-toggle button{color:#4a90d9;cursor:pointer;background:0 0;border:none;padding:0;font-size:.8rem}.auth-toggle button:hover{text-decoration:underline}.auth-error{color:#d32f2f;text-align:center;font-size:.8rem}.auth-skip{text-align:center;margin-top:8px}.auth-skip button{color:#999;cursor:pointer;background:0 0;border:none;font-size:.8rem}@media (width<=600px){.qr-header{flex-direction:column;gap:8px;padding:10px 16px}.qr-header-right{justify-content:space-between;width:100%}.qr-content{padding:0 8px 8px}.qr-widget-area{max-width:100%}.chips-bar{padding:8px 16px}.auth-modal{width:95vw;padding:24px}}