@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");:root{--color-primary:#2563eb;--color-primary-hover:#1d4ed8;--color-primary-light:#eff6ff;--color-primary-muted:#bfdbfe;--color-success:#16a34a;--color-success-light:#f0fdf4;--color-warning:#f59e0b;--color-warning-light:#fffbeb;--color-danger:#dc2626;--color-danger-light:#fef2f2;--gray-50:#f8fafc;--gray-100:#f3f4f6;--gray-200:#e5e7eb;--gray-300:#d1d5db;--gray-400:#9ca3af;--gray-500:#6b7280;--gray-600:#4b5563;--gray-700:#374151;--gray-800:#1f2937;--gray-900:#111827;--text-primary:#111827;--text-secondary:#6b7280;--text-muted:#9ca3af;--text-on-primary:#fff;--surface-page:#fff;--surface-card:#fff;--surface-raised:#f8fafc;--surface-input:#f8fafc;--border-default:#e5e7eb;--border-strong:#d1d5db;--border-focus:#2563eb;--shadow-xs:0 1px 2px rgba(0,0,0,.05);--shadow-sm:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);--shadow-md:0 4px 6px rgba(0,0,0,.05),0 2px 4px rgba(0,0,0,.04);--shadow-lg:0 8px 24px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.04);--shadow-xl:0 16px 40px rgba(0,0,0,.1),0 4px 12px rgba(0,0,0,.04);--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--radius-full:9999px;--space-0:4px;--space-1:8px;--space-2:16px;--space-3:24px;--space-4:32px;--space-5:40px;--space-6:48px;--font-sans:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;--font-size-xs:12px;--font-size-sm:13px;--font-size-base:14px;--font-size-md:16px;--font-size-lg:18px;--font-size-xl:24px;--ease-default:cubic-bezier(0.4,0,0.2,1);--duration-fast:120ms;--duration-base:200ms}*,:after,:before{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%}body{color:var(--text-primary);font-family:var(--font-sans);font-size:var(--font-size-base);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app-container,body{background:var(--surface-page)}.app-container{max-width:480px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;position:relative;box-shadow:var(--shadow-xl)}.page-header{background:var(--color-primary);padding:16px 20px;justify-content:space-between;position:-webkit-sticky;position:sticky;top:0;z-index:100;border-bottom:1px solid hsla(0,0%,100%,.1)}.page-header,.page-header h1{display:flex;align-items:center}.page-header h1{font-size:var(--font-size-md);font-weight:600;color:#fff;letter-spacing:-.01em;gap:8px}.page-header .subtitle{font-size:var(--font-size-xs);color:hsla(0,0%,100%,.72);margin-top:2px}.text-title{font-size:var(--font-size-xl);font-weight:700;color:var(--text-primary);letter-spacing:-.02em}.text-section{font-size:var(--font-size-lg);letter-spacing:-.01em}.text-card,.text-section{font-weight:600;color:var(--text-primary)}.text-card{font-size:var(--font-size-md)}.text-body{font-size:var(--font-size-base);font-weight:400;color:var(--text-primary)}.text-caption{font-size:var(--font-size-xs);font-weight:400;color:var(--text-secondary)}.text-label{font-size:11px;font-weight:600;color:var(--text-muted);letter-spacing:.06em;text-transform:uppercase}.card,.glass-card{background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-lg);padding:20px;margin-bottom:12px;box-shadow:var(--shadow-sm)}.section-label{font-size:11px;font-weight:600;color:var(--text-muted);letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}.form-group{margin-bottom:16px}.form-label{display:block;font-size:var(--font-size-sm);font-weight:500;margin-bottom:6px}.form-input,.form-label{color:var(--text-primary)}.form-input{width:100%;padding:13px 16px;border-radius:var(--radius-lg);border:1.5px solid var(--border-default);background:var(--surface-input);font-family:var(--font-sans);font-size:var(--font-size-base);line-height:1.5;transition:border-color var(--duration-base) var(--ease-default),box-shadow var(--duration-base) var(--ease-default)}.form-input::placeholder{color:var(--text-muted)}.form-input:focus{outline:none;border-color:var(--border-focus);background:#fff;box-shadow:0 0 0 3px rgba(37,99,235,.12)}.search-bar{display:flex;align-items:center;gap:10px;padding:13px 16px;border-radius:var(--radius-lg);border:1.5px solid var(--border-default);background:var(--surface-input);transition:border-color var(--duration-base),box-shadow var(--duration-base)}.search-bar:focus-within{border-color:var(--border-focus);box-shadow:0 0 0 3px rgba(37,99,235,.12)}.search-bar input{flex:1 1;border:none;background:transparent;outline:none;font-size:var(--font-size-base);font-family:var(--font-sans);color:var(--text-primary)}.search-bar input::placeholder{color:var(--text-muted)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 20px;min-height:48px;border-radius:var(--radius-lg);border:none;font-weight:600;font-size:var(--font-size-base);font-family:var(--font-sans);cursor:pointer;width:100%;transition:all var(--duration-fast) var(--ease-default);letter-spacing:-.01em;-webkit-tap-highlight-color:transparent}.btn:active{transform:scale(.98)}.btn-primary{background:var(--color-primary);color:#fff;box-shadow:0 1px 3px rgba(37,99,235,.3),0 1px 2px rgba(37,99,235,.2)}.btn-primary:hover{background:var(--color-primary-hover)}.btn-secondary{background:var(--surface-raised);color:var(--text-primary);border:1.5px solid var(--border-default)}.btn-secondary:hover{background:var(--gray-100)}.btn-success{background:var(--color-success);color:#fff;box-shadow:0 1px 3px rgba(22,163,74,.25)}.btn-success:hover{filter:brightness(1.05)}.btn-danger{background:var(--color-danger);color:#fff;box-shadow:0 1px 3px rgba(220,38,38,.25)}.btn-danger:hover{filter:brightness(1.05)}.btn-ghost{background:transparent;color:var(--color-primary);border:1.5px solid var(--color-primary-muted)}.btn-ghost:hover{background:var(--color-primary-light)}.btn-sm{min-height:36px;padding:8px 16px;font-size:var(--font-size-sm);border-radius:var(--radius-md)}.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-sm);border:none;background:hsla(0,0%,100%,.15);color:#fff;cursor:pointer;transition:background var(--duration-fast);-webkit-tap-highlight-color:transparent}.icon-btn:hover{background:hsla(0,0%,100%,.25)}.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:var(--radius-full);font-size:var(--font-size-xs);font-weight:600;letter-spacing:.01em}.badge-primary{background:var(--color-primary-light);color:var(--color-primary)}.badge-success{background:var(--color-success-light);color:var(--color-success)}.badge-warning{background:var(--color-warning-light);color:var(--color-warning)}.badge-danger{background:var(--color-danger-light);color:var(--color-danger)}.badge-gray{color:var(--gray-600)}.badge-gray,.tab-bar{background:var(--gray-100)}.tab-bar{display:flex;border-radius:var(--radius-md);padding:3px;gap:2px}.tab-btn{flex:1 1;display:flex;align-items:center;justify-content:center;gap:5px;padding:9px 6px;border-radius:9px;border:none;background:transparent;color:var(--text-secondary);font-size:var(--font-size-sm);font-weight:500;font-family:var(--font-sans);cursor:pointer;transition:all var(--duration-fast) var(--ease-default);white-space:nowrap;-webkit-tap-highlight-color:transparent}.tab-btn.active{background:#fff;color:var(--color-primary);font-weight:600;box-shadow:var(--shadow-sm)}.bottom-nav{position:-webkit-sticky;position:sticky;bottom:0;left:0;right:0;height:64px;background:hsla(0,0%,100%,.94);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--border-default);justify-content:space-around;z-index:100;padding-bottom:env(safe-area-inset-bottom,0)}.bottom-nav,.nav-item{display:flex;align-items:center}.nav-item{flex-direction:column;gap:3px;padding:6px 12px;min-width:56px;color:var(--text-muted);font-size:10px;font-weight:500;cursor:pointer;transition:color var(--duration-fast);border:none;background:transparent;font-family:var(--font-sans);-webkit-tap-highlight-color:transparent}.nav-item.active{color:var(--color-primary);font-weight:600}.nav-icon{position:relative}.nav-badge,.nav-icon{display:flex;align-items:center;justify-content:center}.nav-badge{position:absolute;top:-4px;right:-6px;min-width:16px;height:16px;background:var(--color-danger);color:#fff;border-radius:var(--radius-full);font-size:10px;font-weight:700;padding:0 4px;border:1.5px solid #fff}.divider{height:1px;background:var(--border-default);margin:16px 0}.empty-state{flex-direction:column;gap:12px;padding:48px 24px;color:var(--text-muted);text-align:center}.empty-state,.empty-state-icon{display:flex;align-items:center}.empty-state-icon{width:64px;height:64px;border-radius:var(--radius-lg);background:var(--surface-raised);justify-content:center;margin-bottom:4px}.empty-state p{font-size:var(--font-size-sm);line-height:1.6}.loading-spinner{width:20px;height:20px;border:2px solid var(--gray-200);border-top-color:var(--color-primary);border-radius:50%;animation:spin .75s linear infinite;display:inline-block}@keyframes spin{to{transform:rotate(1turn)}}.toast{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:9999;background:var(--gray-900);color:#fff;padding:12px 20px;border-radius:var(--radius-lg);font-size:var(--font-size-sm);font-weight:500;box-shadow:var(--shadow-lg);white-space:nowrap;pointer-events:none;animation:toastIn .2s var(--ease-default)}@keyframes toastIn{0%{opacity:0;transform:translateX(-50%) translateY(-8px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:fadeIn .25s var(--ease-default) forwards}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.animate-slide-up{animation:slideUp .28s cubic-bezier(.16,1,.3,1) forwards}@keyframes scaleIn{0%{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}.animate-scale-in{animation:scaleIn .18s cubic-bezier(.16,1,.3,1) forwards}.img-card{border-radius:var(--radius-lg);overflow:hidden;background:var(--surface-raised)}.img-card img{width:100%;height:100%;object-fit:cover;display:block}.op-tab-bar{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--gray-100);border-radius:var(--radius-md);padding:3px;gap:2px;scrollbar-width:none}.op-tab-bar::-webkit-scrollbar{display:none}.op-tab-btn{flex-shrink:0;min-width:72px}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--gray-300);border-radius:4px}