:root{--ios-bg: #f2f2f7;--ios-card: #ffffff;--ios-blue: #007aff;--ios-blue-light: #e5f1ff;--ios-text: #000000;--ios-text-sub: #8e8e93;--ios-border: #c6c6c8;--ios-red: #ff3b30;--ios-green: #34c759;--ios-orange: #ff9500;--font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", sans-serif;--ease-smooth: cubic-bezier(.16, 1, .3, 1)}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}body{background-color:var(--ios-bg);color:var(--ios-text);font-family:var(--font-family);min-height:100dvh;display:flex;justify-content:center;align-items:flex-start;-webkit-font-smoothing:antialiased}#root{width:100%;min-height:100dvh;display:flex;justify-content:center}.ios-wrapper{width:100%;max-width:600px;min-height:100dvh;background-color:var(--ios-bg);display:flex;flex-direction:column;position:relative}.ios-nav-bar{padding:1.25rem 1.25rem .75rem;display:flex;justify-content:space-between;align-items:flex-end;background:var(--ios-card);border-bottom:.5px solid var(--ios-border)}.ios-nav-title{font-size:1.8rem;font-weight:700;letter-spacing:-.03em}.ios-connection-indicator{display:flex;align-items:center;gap:.4rem;background:var(--ios-bg);padding:.35rem .7rem;border-radius:20px;font-size:.75rem;font-weight:600;transition:background-color .25s var(--ease-smooth),color .25s var(--ease-smooth)}.status-dot{width:7px;height:7px;border-radius:50%;transition:background-color .25s ease,transform .25s ease}.status-dot.state-connected{background-color:var(--ios-green);transform:scale(1.1)}.status-dot.state-transferring{background-color:var(--ios-blue);animation:pulse-dot 1.2s infinite ease-in-out}.status-dot.state-completed{background-color:var(--ios-green)}.status-dot.state-connecting,.status-dot.state-discovering{background-color:var(--ios-orange);animation:pulse-dot 1.5s infinite ease-in-out}.status-dot.state-error{background-color:var(--ios-red)}.status-dot.state-idle{background-color:var(--ios-text-sub)}@keyframes pulse-dot{0%{transform:scale(.9);opacity:.7}50%{transform:scale(1.3);opacity:1}to{transform:scale(.9);opacity:.7}}.ios-content{flex:1;padding:1.25rem;display:flex;flex-direction:column;gap:1.25rem;padding-bottom:80px}.ios-error-banner{background:#fff5f5;border:1px solid #ffd2d2;border-radius:12px;padding:.75rem 1rem;display:flex;align-items:center;gap:.6rem;color:var(--ios-red);font-size:.85rem;font-weight:500;cursor:pointer}.banner-close{margin-left:auto;opacity:.6}.ios-section-header{font-size:.75rem;color:var(--ios-text-sub);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem;padding-left:.5rem}.ios-share-sheet{background:var(--ios-card);border-radius:18px;padding:1.5rem;display:flex;align-items:center;gap:1rem;cursor:pointer;box-shadow:0 2px 10px #00000008;transition:transform .2s var(--ease-smooth),box-shadow .2s var(--ease-smooth),border-color .2s ease;border:2px dashed transparent}.ios-share-sheet:active{transform:scale(.98)}.ios-share-sheet.drag-over{border-color:var(--ios-blue);background:var(--ios-blue-light);transform:scale(1.02)}.share-icon-circle{width:48px;height:48px;border-radius:50%;background:var(--ios-blue-light);color:var(--ios-blue);display:flex;align-items:center;justify-content:center;transition:transform .25s var(--ease-smooth)}.ios-share-sheet:hover .share-icon-circle{transform:rotate(-8deg) scale(1.05)}.share-text h3{font-size:1.05rem;font-weight:600}.share-text p{font-size:.8rem;color:var(--ios-text-sub)}.ios-pair-card{background:var(--ios-card);border-radius:18px;padding:1.25rem;display:flex;flex-direction:column;gap:1rem;box-shadow:0 2px 10px #00000008;overflow:hidden}.pair-actions-row{display:flex;gap:.75rem}.ios-pair-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1.25rem .5rem;border-radius:14px;border:none;font-size:.85rem;font-weight:600;cursor:pointer;transition:transform .2s var(--ease-smooth),opacity .2s ease,background-color .2s ease}.ios-pair-btn:active{transform:scale(.96)}.ios-pair-btn.primary{background:var(--ios-blue);color:#fff}.ios-pair-btn.primary.active{background:#0056b3;box-shadow:0 0 0 2px #0056b3}.ios-pair-btn.secondary{background:#e5e5ea;color:var(--ios-text)}.ios-pair-btn.secondary.active{background:#d1d1d6;box-shadow:0 0 0 2px var(--ios-blue)}.expanding-view-container{max-height:0;opacity:0;overflow:hidden;transform:scaleY(.95);transform-origin:top center;transition:max-height .35s var(--ease-smooth),opacity .3s ease,transform .3s var(--ease-smooth)}.expanding-view-container.expanded{max-height:520px;opacity:1;transform:scaleY(1);border-top:.5px solid #e5e5ea;padding-top:1rem}.expand-content{display:flex;flex-direction:column;align-items:center;gap:.75rem;width:100%}.expand-header{width:100%;display:flex;justify-content:space-between;align-items:center}.expand-title{font-size:.9rem;font-weight:600}.icon-btn-close{background:#f2f2f7;border:none;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .15s ease}.icon-btn-close:active{background:#e5e5ea}.pair-qr-image{width:200px;height:200px;border-radius:12px;box-shadow:0 2px 8px #0000000f}.qr-skeleton{width:200px;height:200px;border-radius:12px;background:#f2f2f7;display:flex;align-items:center;justify-content:center;font-size:.8rem;color:var(--ios-text-sub)}.qr-hint{font-size:.8rem;color:var(--ios-text-sub);text-align:center}.token-btn-group{display:flex;gap:.5rem;width:100%}.camera-frame-wrapper{position:relative;width:100%;max-width:280px;height:220px;border-radius:14px;overflow:hidden;background:#000}.camera-view{width:100%;height:100%;object-fit:cover}.scan-crosshair{position:absolute;top:20px;right:20px;bottom:20px;left:20px;border:2px solid rgba(255,255,255,.7);border-radius:12px;box-shadow:0 0 0 9999px #0006;pointer-events:none}.camera-error-box{background:#fff5f5;border-radius:12px;padding:1.25rem;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.75rem;font-size:.85rem;color:var(--ios-red)}.token-textarea{width:100%;height:100px;border-radius:10px;border:1px solid var(--ios-border);padding:.75rem;font-family:monospace;font-size:.75rem;resize:none}.discovered-section{display:flex;flex-direction:column;gap:.75rem;border-top:.5px solid #e5e5ea;padding-top:.75rem}.discovered-label{font-size:.75rem;color:var(--ios-text-sub);font-weight:600}.ios-device-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:.75rem}.ios-device-avatar{display:flex;flex-direction:column;align-items:center;gap:.35rem;cursor:pointer;transition:transform .15s var(--ease-smooth)}.ios-device-avatar:active{transform:scale(.94)}.avatar-circle{width:56px;height:56px;border-radius:50%;background:#f2f2f7;display:flex;align-items:center;justify-content:center;color:var(--ios-blue);box-shadow:0 2px 6px #0000000a}.device-label{font-size:.75rem;font-weight:600;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80px}.device-sublabel{font-size:.65rem;color:var(--ios-blue)}.connected-banner{background:var(--ios-card);border-radius:18px;padding:1.25rem;box-shadow:0 2px 10px #00000008}.connected-info{display:flex;align-items:center;gap:.75rem}.connected-info h3{font-size:1rem;font-weight:600}.connected-info p{font-size:.75rem;color:var(--ios-text-sub)}.ios-list-group{background:var(--ios-card);border-radius:18px;overflow:hidden;box-shadow:0 2px 10px #00000008}.ios-list-item{padding:.85rem 1rem;display:flex;justify-content:space-between;align-items:center;border-bottom:.5px solid #e5e5ea;font-size:.9rem}.ios-list-item:last-child{border-bottom:none}.ios-item-value{color:var(--ios-text-sub)}.ios-item-value.highlight{color:var(--ios-blue);font-weight:700}.ios-item-value.clickable{color:var(--ios-blue);cursor:pointer;display:flex;align-items:center;gap:.2rem}.ios-progress-wrapper{padding:1rem}.progress-bar-container{height:6px;background:#e5e5ea;border-radius:9999px;overflow:hidden}.progress-bar-fill{height:100%;background:var(--ios-blue);transition:width .15s ease-out}.ios-button-row{display:flex;padding:.75rem 1rem;gap:.5rem}.ios-btn{flex:1;padding:.65rem .75rem;border-radius:10px;border:none;font-size:.85rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.35rem;transition:transform .15s ease,opacity .15s ease}.ios-btn:active{transform:scale(.97)}.ios-btn-blue{background:var(--ios-blue);color:#fff}.ios-btn-gray{background:#e5e5ea;color:#000}.ios-btn-subtle{background:transparent;color:var(--ios-blue)}.ios-btn-red{background:#ff3b301a;color:var(--ios-red)}.ios-file-row{padding:.85rem 1rem;border-bottom:.5px solid #e5e5ea;display:flex;flex-direction:column;gap:.5rem}.file-main-info{display:flex;justify-content:space-between;align-items:center}.ios-file-title{font-weight:600;font-size:.85rem}.ios-file-sub{font-size:.75rem;color:var(--ios-text-sub)}.ios-file-actions{display:flex;gap:1rem}.ios-action-link{background:none;border:none;color:var(--ios-text-sub);font-weight:500;font-size:.8rem;cursor:pointer}.ios-action-link.primary{color:var(--ios-blue)}.ios-input{padding:.2rem .5rem;border-radius:6px;border:1px solid var(--ios-border);font-size:.85rem}.ios-tab-bar{position:fixed;bottom:0;width:100%;max-width:600px;height:65px;background:#fffffff2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-top:.5px solid #c6c6c8;display:flex;justify-content:space-around;align-items:center}.ios-tab{background:none;border:none;display:flex;flex-direction:column;align-items:center;gap:.2rem;color:var(--ios-text-sub);cursor:pointer;transition:color .15s ease}.ios-tab.active{color:var(--ios-blue)}.tab-label{font-size:.65rem;font-weight:500}.preview-container{margin-top:.5rem;background:#f2f2f7;border-radius:8px;overflow:hidden;padding:.5rem}.preview-image{max-width:100%;max-height:200px;border-radius:6px;display:block;margin:0 auto}.preview-video,.preview-audio{width:100%;border-radius:6px}.preview-code{font-family:monospace;font-size:.75rem;max-height:150px;overflow:auto;white-space:pre-wrap;word-break:break-all}.anim-enter{animation:fade-enter .25s var(--ease-smooth)}.anim-slide-down{animation:slide-down .25s var(--ease-smooth)}.anim-scale{animation:scale-pop .2s var(--ease-smooth)}.anim-fade{animation:fade-enter .2s ease}@keyframes fade-enter{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-down{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes scale-pop{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@media(prefers-reduced-motion:reduce){*,:before,:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}