.back-btn{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--blue-500);background:#e8f0fe;flex-shrink:0;transition:transform var(--transition-fast);border:none;cursor:pointer;text-decoration:none}.back-btn:active{transform:scale(.9)}.header{position:sticky;top:0;z-index:10;background:#f9f9fbd9;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border-subtle);padding:var(--space-lg)}.header-content{max-width:480px;margin:0 auto;display:flex;align-items:center;gap:var(--space-md)}.header-left{flex-shrink:0;display:flex;align-items:center}.header-text{flex:1;min-width:0}.header-title{font-size:22px;font-weight:700;letter-spacing:-.03em;color:var(--text-primary);line-height:1.3}.header-subtitle{font-size:14px;color:var(--text-secondary);line-height:1.3}.user-btn{display:flex;align-items:center;gap:var(--space-sm);padding:6px 12px 6px 6px;border-radius:var(--radius-full);background:var(--bg-secondary);border:1px solid var(--border-subtle);transition:all var(--transition-fast);flex-shrink:0;cursor:pointer;font-family:inherit}.user-btn:active{transform:scale(.97)}.user-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#007aff,#0055d6);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}.user-name{font-size:14px;font-weight:600;color:var(--text-primary);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-btn{font-weight:600;font-family:inherit;cursor:pointer;border:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:all .2s ease;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.ui-btn--sm{padding:8px 14px;font-size:13px;border-radius:8px}.ui-btn--md{padding:12px 20px;font-size:15px;border-radius:10px}.ui-btn--lg{padding:16px 28px;font-size:17px;border-radius:12px}.ui-btn--primary{background:linear-gradient(135deg,#007aff,#0055d6);color:#fff;box-shadow:0 2px 8px #007aff4d}.ui-btn--secondary{background:#f2f2f7;color:#007aff;border:1px solid #e5e5ea}.ui-btn--ghost{background:transparent;color:#007aff}.ui-btn--danger{background:#ff3b30;color:#fff}.ui-btn--full{width:100%}.ui-input{width:100%;border:1.5px solid #e5e5ea;background:#fff;color:#1c1c1e;font-family:inherit;outline:none;transition:border-color .2s ease,box-shadow .2s ease}.ui-input:focus{border-color:#007aff;box-shadow:0 0 0 3px #007aff26}.ui-input--sm{padding:8px 12px;font-size:14px;border-radius:8px}.ui-input--md{padding:12px 16px;font-size:15px;border-radius:10px}.ui-input--lg{padding:16px 20px;font-size:17px;border-radius:12px}.app-grid{display:flex;flex-direction:column;gap:var(--space-md)}.app-card{display:flex;align-items:center;gap:var(--space-md);background:var(--bg-card);border-radius:var(--radius-lg);padding:var(--space-lg);border:1px solid var(--border-subtle);box-shadow:var(--shadow-sm);transition:all var(--transition-fast);position:relative;overflow:hidden}.app-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,rgba(0,122,255,.03),transparent 60%);opacity:0;transition:opacity var(--transition-fast)}.app-card:active{transform:scale(.985);box-shadow:var(--shadow-md);border-color:var(--blue-400)}.app-card:active:before{opacity:1}.app-card-icon{width:44px;height:44px;border-radius:var(--radius-md);background:var(--blue-100);color:var(--blue-500);display:flex;align-items:center;justify-content:center;flex-shrink:0}.app-card-body{flex:1;min-width:0}.app-card-title{font-size:16px;font-weight:600;color:var(--text-primary);margin-bottom:2px}.app-card-desc{font-size:13px;color:var(--text-secondary);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.app-card-arrow{color:var(--gray-400);flex-shrink:0;transition:transform var(--transition-fast)}.app-card:active .app-card-arrow{transform:translate(3px)}.app-card--skeleton{pointer-events:none}.skeleton-icon{width:44px;height:44px;border-radius:var(--radius-md);background:linear-gradient(90deg,var(--gray-100) 25%,var(--gray-200) 50%,var(--gray-100) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;flex-shrink:0}.skeleton-title{height:16px;width:60%;border-radius:4px;background:linear-gradient(90deg,var(--gray-100) 25%,var(--gray-200) 50%,var(--gray-100) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;margin-bottom:6px}.skeleton-desc{height:12px;width:40%;border-radius:4px;background:linear-gradient(90deg,var(--gray-100) 25%,var(--gray-200) 50%,var(--gray-100) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}.state-msg{text-align:center;padding:var(--space-3xl) var(--space-xl);color:var(--text-secondary);font-size:15px;display:flex;flex-direction:column;align-items:center;gap:var(--space-md)}.state-msg-icon{width:48px;height:48px;border-radius:50%;background:var(--blue-100);color:var(--blue-500);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700}.retry-btn{padding:10px 20px;border-radius:var(--radius-md);background:var(--blue-500);color:#fff;font-size:14px;font-weight:600;transition:opacity var(--transition-fast)}.retry-btn:active{opacity:.8}.settings-view{max-width:480px;margin:0 auto;padding:var(--space-lg);animation:fadeIn .3s ease}.settings-header{margin-bottom:var(--space-xl)}.settings-back{display:inline-flex;align-items:center;gap:var(--space-xs);font-size:14px;font-weight:500;color:var(--blue-500);margin-bottom:var(--space-lg);transition:opacity var(--transition-fast)}.settings-back:active{opacity:.7}.settings-title{display:flex;align-items:center;gap:var(--space-md);font-size:28px;font-weight:700;letter-spacing:-.03em;color:var(--text-primary)}.settings-title svg{color:var(--blue-500);width:28px;height:28px}.settings-card{display:flex;align-items:center;gap:var(--space-md);background:var(--bg-card);border-radius:var(--radius-lg);padding:var(--space-lg);border:1px solid var(--border-subtle);box-shadow:var(--shadow-sm)}.settings-card-icon{width:44px;height:44px;border-radius:var(--radius-md);background:var(--blue-100);color:var(--blue-500);display:flex;align-items:center;justify-content:center;flex-shrink:0}.settings-card-body{flex:1;min-width:0}.settings-card-title{font-size:16px;font-weight:600;color:var(--text-primary);margin-bottom:2px}.settings-card-desc{font-size:13px;color:var(--text-secondary);line-height:1.4}.settings-toggle{position:relative;width:50px;height:30px;border-radius:15px;background:var(--gray-300);transition:background var(--transition-fast);flex-shrink:0;padding:0;border:none;cursor:pointer}.settings-toggle--on{background:var(--green)}.settings-toggle-thumb{display:block;width:26px;height:26px;border-radius:50%;background:#fff;position:absolute;top:2px;left:2px;transition:transform var(--transition-fast);box-shadow:0 1px 3px #0003}.settings-toggle--on .settings-toggle-thumb{transform:translate(20px)}.settings-section{margin-top:var(--space-xl)}.settings-room-count{font-size:20px;font-weight:700;color:var(--text-secondary);min-width:32px;text-align:center}.settings-loading{text-align:center;color:var(--text-tertiary);padding:var(--space-lg)}.settings-empty{text-align:center;color:var(--text-tertiary);padding:var(--space-lg);font-size:14px}.settings-room-list{display:flex;flex-direction:column;gap:var(--space-md);margin-top:var(--space-md)}.settings-room-group{display:flex;flex-direction:column;gap:var(--space-xs)}.settings-room-group-header{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:600;color:var(--text-tertiary);padding:var(--space-xs) var(--space-sm);text-transform:uppercase;letter-spacing:.05em}.settings-clear-btn{font-size:12px;font-weight:600;color:var(--red);background:none;border:none;cursor:pointer;padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);transition:background var(--transition-fast)}.settings-clear-btn:active{background:#ff3b301a}.settings-room-row{display:flex;align-items:center;justify-content:space-between;background:var(--bg-card);border-radius:var(--radius-md);padding:var(--space-sm) var(--space-md);border:1px solid var(--border-subtle)}.settings-room-info{display:flex;align-items:center;gap:var(--space-md);flex:1;min-width:0}.settings-room-group-subheader{font-size:12px;font-weight:500;color:var(--text-tertiary);padding:var(--space-xs) var(--space-sm) 0}.settings-room-code{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text-primary);font-family:var(--font-mono, monospace);letter-spacing:.1em}.settings-room-type{font-size:12px;font-weight:500;color:var(--blue-500);background:var(--blue-100);padding:2px 8px;border-radius:var(--radius-sm);text-transform:lowercase}.settings-room-meta{font-size:13px;color:var(--text-secondary)}.settings-room-delete{width:32px;height:32px;border-radius:var(--radius-sm);background:none;border:none;color:var(--gray-400);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:color var(--transition-fast),background var(--transition-fast)}.settings-room-delete:active{color:var(--red);background:#ff3b301a}.app{min-height:100dvh;position:relative;padding-top:var(--safe-inset-top, 0px);padding-bottom:var(--safe-inset-bottom, 0px);padding-left:var(--safe-inset-left, 0px);padding-right:var(--safe-inset-right, 0px)}.app-bg{position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse 80% 60% at 50% -20%,rgba(0,122,255,.06) 0%,transparent 70%),radial-gradient(ellipse 60% 50% at 80% 100%,rgba(0,122,255,.04) 0%,transparent 60%);pointer-events:none;z-index:0}.main{max-width:480px;margin:0 auto;padding:var(--space-lg);position:relative;z-index:1;animation:fadeIn .3s ease}:root{--gray-50: #f9f9fb;--gray-100: #f2f2f7;--gray-200: #e5e5ea;--gray-300: #d1d1d6;--gray-400: #aeaeb2;--gray-500: #8e8e93;--gray-600: #636366;--gray-700: #48484a;--gray-800: #2c2c2e;--gray-900: #1c1c1e;--blue-100: #e8f0fe;--blue-200: #c6d9f8;--blue-300: #85b4f0;--blue-400: #409cff;--blue-500: #007aff;--blue-600: #0055d6;--blue-700: #003da5;--green: #34c759;--red: #ff3b30;--yellow: #ffcc02;--bg-primary: var(--gray-50);--bg-secondary: #ffffff;--bg-card: #ffffff;--bg-overlay: rgba(0, 0, 0, .5);--text-primary: var(--gray-900);--text-secondary: var(--gray-500);--text-tertiary: var(--gray-400);--text-inverse: #ffffff;--border-subtle: var(--gray-200);--border-default: var(--gray-300);--shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);--shadow-md: 0 4px 12px rgba(0, 0, 0, .06);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .08);--shadow-xl: 0 16px 48px rgba(0, 0, 0, .12);--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;--space-xl: 24px;--space-2xl: 32px;--space-3xl: 48px;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-xl: 24px;--radius-full: 9999px;--font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", sans-serif;--font-mono: "SF Mono", ui-monospace, monospace;--transition-fast: .15s ease;--transition-normal: .25s ease;--transition-slow: .4s ease;--safe-inset-top: env(safe-area-inset-top, 0px);--safe-inset-bottom: env(safe-area-inset-bottom, 0px);--safe-inset-left: env(safe-area-inset-left, 0px);--safe-inset-right: env(safe-area-inset-right, 0px);--content-safe-inset-top: env(safe-area-inset-top, 0px);--content-safe-inset-bottom: env(safe-area-inset-bottom, 0px);--content-safe-inset-left: env(safe-area-inset-left, 0px);--content-safe-inset-right: env(safe-area-inset-right, 0px)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-family);background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100dvh}a{text-decoration:none;color:inherit}button{font-family:inherit;cursor:pointer;border:none;background:none}input{font-family:inherit}.container{width:100%;max-width:480px;margin:0 auto;padding:0 var(--space-lg)}@media (min-width: 768px){.container{max-width:640px;padding:0 var(--space-xl)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes shimmer{0%{background-position:-200% center}to{background-position:200% center}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.animate-fade-in{animation:fadeIn var(--transition-normal) ease forwards}.animate-slide-up{animation:slideUp var(--transition-normal) ease forwards}.animate-scale-in{animation:scaleIn var(--transition-normal) ease forwards}