.demo-body{background:var(--indigo);min-height:100svh;overflow-x:hidden}.demo-container{flex-direction:column;max-width:480px;min-height:100svh;margin:0 auto;padding:0 24px;display:flex}.demo-header{align-items:center;gap:14px;padding:20px 0 16px;display:flex}.demo-back{color:#ffffffb3;background:#ffffff14;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;transition:all .2s;display:flex}.demo-back:hover{color:var(--white);background:#ffffff26}.demo-logo{color:var(--white);letter-spacing:-.02em;font-family:Nunito,sans-serif;font-size:1.3rem;font-weight:900}.demo-main{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:32px;padding:20px 0 32px;display:flex}.demo-scan-area{position:relative}.demo-qr-frame{justify-content:center;align-items:center;width:180px;height:180px;animation:3s ease-in-out infinite qr-breathe;display:flex;position:relative}@keyframes qr-breathe{0%,to{transform:scale(1)}50%{transform:scale(1.03)}}.qr-corner{border-color:var(--peach);border-style:solid;width:28px;height:28px;position:absolute}.qr-tl{border-width:3px 0 0 3px;border-radius:6px 0 0;top:0;left:0}.qr-tr{border-width:3px 3px 0 0;border-radius:0 6px 0 0;top:0;right:0}.qr-bl{border-width:0 0 3px 3px;border-radius:0 0 0 6px;bottom:0;left:0}.qr-br{border-width:0 3px 3px 0;border-radius:0 0 6px;bottom:0;right:0}.qr-scan-line{background:linear-gradient(90deg, transparent, var(--peach), transparent);opacity:.7;border-radius:1px;height:2px;animation:2.5s ease-in-out infinite scan-sweep;position:absolute;top:8px;left:12px;right:12px}@keyframes scan-sweep{0%{opacity:0;top:8px}10%{opacity:.7}90%{opacity:.7}to{opacity:0;top:164px}}.qr-icon{color:#ffffff40}.demo-text{max-width:360px}.demo-text h1{color:var(--white);margin-bottom:12px;font-family:Nunito,Noto Sans TC,sans-serif;font-size:clamp(1.3rem,5vw,1.7rem);font-weight:900;line-height:1.35}.demo-subtitle{color:#fff9;font-size:.9rem;line-height:1.65}.demo-status{color:#ffffff8c;background:#ffffff0f;border:1px solid #ffffff1a;border-radius:100px;align-items:center;gap:8px;padding:8px 18px;font-size:.8rem;font-weight:600;display:inline-flex}.demo-status-dot{background:var(--peach);border-radius:50%;flex-shrink:0;width:8px;height:8px;animation:2s infinite pulse}.demo-footer{padding-bottom:32px}.demo-divider{background:#ffffff14;height:1px;margin-bottom:24px}.demo-not-here{align-items:flex-start;gap:14px;margin-bottom:20px;display:flex}.demo-not-here-icon{flex-shrink:0;margin-top:2px;font-size:1.4rem}.demo-not-here-title{color:var(--white);margin-bottom:4px;font-family:Nunito,Noto Sans TC,sans-serif;font-size:.92rem;font-weight:800}.demo-not-here-desc{color:#ffffff80;font-size:.8rem;line-height:1.55}.demo-bars{margin-bottom:24px}.demo-bars-head{justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px;display:flex}.demo-bars-title{color:var(--white);font-family:Nunito,Noto Sans TC,sans-serif;font-size:.92rem;font-weight:800}.demo-bars-count{color:var(--peach);white-space:nowrap;background:#efc18f24;border-radius:100px;flex-shrink:0;padding:3px 11px;font-size:.72rem;font-weight:700}.demo-bars-search{margin-bottom:10px;position:relative}.demo-bars-search-icon{color:#fff6;pointer-events:none;position:absolute;top:50%;left:14px;transform:translateY(-50%)}.demo-bars-input{box-sizing:border-box;width:100%;color:var(--white);background:#ffffff0d;border:1px solid #ffffff1f;border-radius:12px;padding:11px 14px 11px 40px;font-family:Nunito,Noto Sans TC,sans-serif;font-size:.85rem;transition:border-color .2s,background .2s}.demo-bars-input::placeholder{color:#fff6}.demo-bars-input:focus{background:#ffffff14;border-color:#efc18f99;outline:none}.demo-bars-input::-webkit-search-cancel-button{appearance:none}.demo-bars-scroll{-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#ffffff2e transparent;min-height:120px;max-height:46vh;margin:0 -4px;padding:2px 4px;position:relative;overflow-y:auto;-webkit-mask-image:linear-gradient(#0000 0,#000 12px calc(100% - 12px),#0000 100%);mask-image:linear-gradient(#0000 0,#000 12px calc(100% - 12px),#0000 100%)}.demo-bars-scroll::-webkit-scrollbar{width:6px}.demo-bars-scroll::-webkit-scrollbar-thumb{background:#ffffff2e;border-radius:100px}.demo-bars-list{flex-direction:column;gap:8px;display:flex}.demo-bar-item{background:#ffffff0d;border:1px solid #ffffff14;border-radius:12px;justify-content:space-between;align-items:center;gap:12px;padding:13px 14px 13px 16px;text-decoration:none;transition:background .18s,border-color .18s,transform .18s;display:flex}.demo-bar-item[hidden]{display:none}.demo-bar-item:hover{background:#efc18f1a;border-color:#efc18f4d}.demo-bar-item:active{transform:scale(.99)}.demo-bar-item:focus-visible{outline:2px solid var(--peach);outline-offset:2px}.demo-bar-info{flex-direction:column;gap:3px;min-width:0;display:flex}.demo-bar-name{color:var(--white);white-space:nowrap;text-overflow:ellipsis;font-family:Nunito,sans-serif;font-size:.88rem;font-weight:800;overflow:hidden}.demo-bar-addr{color:#fff6;white-space:nowrap;text-overflow:ellipsis;font-size:.72rem;overflow:hidden}.demo-bar-go{color:#ffffff4d;flex-shrink:0;transition:color .18s,transform .18s}.demo-bar-item:hover .demo-bar-go{color:var(--peach);transform:translate(2px)}.demo-bars-empty{text-align:center;color:#ffffff73;padding:28px 0;font-size:.8rem}.demo-bars-hint{color:#ffffff59;text-align:center;margin-top:12px;font-size:.72rem}.demo-lang-toggle{justify-content:center;display:flex}.demo-lang-toggle #lang-toggle{background:#ffffff14;border:1px solid #ffffff1f;border-radius:20px;align-items:center;gap:0;padding:3px;display:flex}
