:root{--md-sys-color-primary:#1a73e8;--md-sys-color-on-primary:#fff;--md-sys-color-surface:#f8f9fa;--md-sys-color-surface-container:#fff;--md-sys-color-on-surface:#202124;--md-sys-color-on-surface-variant:#5f6368;--md-sys-color-outline:#dadce0;--md-sys-color-error:#d93025;--md-sys-color-success:#1e8e3e;--google-blue:#4285f4;--google-red:#ea4335;--google-yellow:#fbbc05;--google-green:#34a853}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}body{background-color:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface);justify-content:center;min-height:100vh;font-family:Roboto,Google Sans,sans-serif;display:flex}#app{flex-direction:column;width:100%;max-width:500px;display:flex}header{border-bottom:1px solid var(--md-sys-color-outline);text-align:center;background:#fff;padding:24px 16px}.logo-container{justify-content:center;align-items:center;gap:12px;margin-bottom:4px;display:flex}.logo{width:32px;height:32px}h1{color:var(--md-sys-color-on-surface);font-size:22px;font-weight:400}h1 span{color:var(--google-blue);font-weight:500}.subtitle{color:var(--md-sys-color-on-surface-variant);font-size:14px}main{flex:1;padding:16px}.tabs{border-bottom:1px solid var(--md-sys-color-outline);justify-content:center;margin-bottom:24px;display:flex}.tabs button{color:var(--md-sys-color-on-surface-variant);cursor:pointer;background:0 0;border:none;padding:12px 24px;font-size:14px;font-weight:500;transition:color .2s;position:relative}.tabs button.active{color:var(--md-sys-color-primary)}.tabs button.active:after{content:"";background:var(--md-sys-color-primary);border-radius:3px 3px 0 0;height:3px;position:absolute;bottom:-1px;left:0;right:0}.panel{animation:.3s ease-out fadeIn}.panel.hidden{display:none}.card{background:var(--md-sys-color-surface-container);border:1px solid var(--md-sys-color-outline);border-radius:16px;flex-direction:column;gap:20px;padding:20px;display:flex;box-shadow:0 1px 2px #3c40434d,0 1px 3px 1px #3c404326}.status-indicator{color:var(--md-sys-color-on-surface-variant);background:#f1f3f4;border-radius:8px;align-items:center;gap:8px;width:fit-content;padding:8px 12px;font-size:14px;display:flex}.dot{background:#dadce0;border-radius:50%;width:10px;height:10px}.scanning .dot{background:var(--google-blue);animation:1.2s infinite pulse}.success .dot{background:var(--google-green)}.error .dot{background:var(--google-red)}.output{border:1px solid var(--md-sys-color-outline);min-height:150px;color:var(--md-sys-color-on-surface);background:#f8f9fa;border-radius:12px;padding:16px;font-size:14px;overflow-y:auto}.placeholder{color:var(--md-sys-color-on-surface-variant);text-align:center;margin-top:20px}.input-group{flex-direction:column;gap:8px;display:flex}label{color:var(--md-sys-color-primary);margin-left:4px;font-size:12px;font-weight:500}textarea,.md-select{border:1px solid var(--md-sys-color-outline);background:#fff;border-radius:8px;padding:12px;font-family:inherit;font-size:16px;transition:border-color .2s,box-shadow .2s}textarea{resize:none;height:120px}.md-select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235f6368' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;background-size:16px;padding-right:40px}textarea:focus,.md-select:focus{border-color:var(--md-sys-color-primary);outline:none;box-shadow:0 0 0 2px #1a73e833}.help-text{color:var(--md-sys-color-on-surface-variant);text-align:center;font-size:12px;font-style:italic}.primary-btn{background-color:var(--md-sys-color-primary);color:#fff;cursor:pointer;border:none;border-radius:24px;justify-content:center;align-items:center;gap:8px;padding:12px 24px;font-size:14px;font-weight:500;transition:background-color .2s,box-shadow .2s;display:flex;box-shadow:0 1px 3px #3c40434d,0 4px 8px 3px #3c404326}.primary-btn:hover{background-color:#1967d2;box-shadow:0 2px 3px #3c40434d,0 6px 10px 4px #3c404326}.primary-btn:active{background-color:#185abc;box-shadow:0 1px 2px #3c40434d,0 3px 6px 2px #3c404326}.toast{color:#f1f3f4;z-index:1000;text-align:center;background:#323336;border-radius:4px;min-width:288px;padding:12px 24px;font-size:14px;transition:transform .2s cubic-bezier(0,0,.2,1);position:fixed;bottom:24px;left:50%;transform:translate(-50%)translateY(100px);box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}.toast.show{transform:translate(-50%)translateY(0)}footer{text-align:center;color:var(--md-sys-color-on-surface-variant);padding:24px;font-size:12px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes pulse{0%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.2)}to{opacity:1;transform:scale(1)}}