@import"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Noto+Sans+TC:wght@300;400;500;700&display=swap";:root{--primary-h: 162;--primary-s: 84%;--primary-l: 45%;--primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));--primary-hover: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) - 8%));--primary-light: hsla(var(--primary-h), var(--primary-s), var(--primary-l), .15);--secondary: #3b82f6;--secondary-light: rgba(59, 130, 246, .15);--bg-dark: #0f172a;--bg-darker: #020617;--surface-dark: rgba(30, 41, 59, .7);--surface-light: rgba(255, 255, 255, .05);--text-primary: #f8fafc;--text-secondary: #a8b6c9;--text-muted: #7686a1;--surface-1: #0b1322;--surface-2: #131e33;--surface-3: #1c2a44;--border-color: rgba(255, 255, 255, .08);--border-focus: hsla(var(--primary-h), var(--primary-s), var(--primary-l), .4);--shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, .3);--shadow-md: 0 4px 20px -4px rgba(0, 0, 0, .5);--shadow-lg: 0 10px 30px -10px rgba(0, 0, 0, .8);--glass-blur: 16px;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px)}@media (max-width: 499px){body.status-bar-overlap{--safe-top: 44px;--safe-top: max(env(safe-area-inset-top), 44px)}}html{background-color:#020617!important}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}body{font-family:Outfit,Noto Sans TC,sans-serif;background:radial-gradient(circle at center,#1e293b,#020617);color:var(--text-primary);overflow:hidden;height:100vh;height:100dvh;width:100vw;display:flex;justify-content:center;align-items:center;-webkit-font-smoothing:antialiased}#root{display:flex;flex-direction:column;height:100vh;height:100dvh;width:100%;position:relative;overflow:hidden;background-color:var(--bg-darker)}@media (min-width: 500px){#root{max-width:430px;height:90vh;border-radius:36px;border:8px solid #1e293b;box-shadow:0 25px 50px -12px #000000b3,0 0 0 1px #ffffff0d}}.glass{background:#1e293be0;backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--border-color)}.glass-light{background:var(--surface-light);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--border-color)}.page-container .glass,.page-container .glass-light{backdrop-filter:none;-webkit-backdrop-filter:none}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}.page-container{flex:1;overflow-y:auto;padding:calc(64px + var(--safe-top)) 16px calc(80px + var(--safe-bottom)) 16px;animation:fadeIn .3s cubic-bezier(.16,1,.3,1) forwards;display:flex;flex-direction:column}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.bounce-hover:hover{transform:scale(1.03)}input,textarea,select{width:100%;padding:12px 16px;background:#0f172a99;border:1px solid var(--border-color);border-radius:12px;color:var(--text-primary);font-family:inherit;font-size:14px;transition:all .2s ease;outline:none}input:focus,textarea:focus,select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}button{cursor:pointer;border:none;font-family:inherit;outline:none;transition:all .2s cubic-bezier(.16,1,.3,1)}button:active{transform:scale(.96)}button:focus-visible,input:focus-visible,.item-card:focus-visible{outline:2px solid var(--primary);outline-offset:2px}@keyframes msgIn{0%{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.msg-appear{animation:msgIn .18s ease-out}@keyframes toastIn{0%{opacity:0;transform:translateY(12px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.toast-item{animation:toastIn .22s cubic-bezier(.16,1,.3,1)}@keyframes shimmer{to{background-position:-200% 0}}.skeleton{background:linear-gradient(90deg,#ffffff0a 25%,#ffffff1a,#ffffff0a 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:12px}.btn-primary{background:var(--primary);color:#000;font-weight:600;padding:12px 24px;border-radius:12px;box-shadow:0 4px 12px #10b9814d}.btn-primary:active{transform:scale(.97);background:var(--primary-hover)}.btn-secondary{background:var(--surface-light);color:var(--text-primary);border:1px solid var(--border-color);padding:12px 24px;border-radius:12px}.btn-secondary:active{transform:scale(.97);background:#ffffff1a}.bottom-nav{position:absolute;bottom:calc(16px + var(--safe-bottom));left:16px;right:16px;height:52px;display:flex;justify-content:space-around;align-items:center;z-index:100;border:1px solid rgba(255,255,255,.06);border-radius:26px;background:#0f121cf2!important;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 8px 32px #00000080,0 0 1px 1px #ffffff05;padding:0 8px}.nav-item{display:flex;align-items:center;justify-content:center;height:38px;border-radius:19px;color:#fff9;cursor:pointer;background:none;transition:all .2s cubic-bezier(.16,1,.3,1);padding:0 14px;border:none;flex:none}.nav-item svg{width:22px;height:22px;stroke-width:2;transition:transform .2s cubic-bezier(.175,.885,.32,1.275)}.nav-item.active{background:#ffffff26!important;color:#fff!important}.nav-item.active svg{transform:scale(1.05)}.app-header{position:absolute;top:0;left:0;right:0;height:calc(56px + var(--safe-top));padding-top:var(--safe-top);z-index:100;border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;padding-left:16px;padding-right:16px;box-shadow:0 4px 20px #0003;background:#090d16!important}.app-title{font-size:20px;font-weight:700;background:linear-gradient(135deg,#10b981,#34d399);-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-.5px}.categories-container{display:flex;overflow-x:auto;gap:8px;padding:4px 0 12px;margin-bottom:8px}.categories-container::-webkit-scrollbar{display:none}.category-tab{white-space:nowrap;padding:8px 16px;border-radius:20px;font-size:13px;font-weight:500;background:var(--surface-light);border:1px solid var(--border-color);color:var(--text-secondary);transition:all .2s ease}.category-tab.active{background:var(--primary);color:#000;border-color:var(--primary);font-weight:600}.items-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:8px}.item-card{border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:all .25s cubic-bezier(.16,1,.3,1);box-shadow:var(--shadow-sm)}.item-card:active{transform:scale(.97)}.card-img-wrapper{position:relative;width:100%;padding-top:100%;background:#1e293b}.card-img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.card-badge{position:absolute;top:8px;left:8px;padding:4px 8px;border-radius:8px;font-size:10px;font-weight:600;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.badge-free{background:#10b981d9;color:#000}.badge-swap{background:#3b82f6d9;color:#fff}.card-content{padding:10px;display:flex;flex-direction:column;flex:1}.card-title{font-size:14px;font-weight:600;margin-bottom:4px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-meta{display:flex;justify-content:space-between;align-items:center;margin-top:auto;font-size:11px;color:var(--text-secondary)}.card-location{display:flex;align-items:center;gap:2px}.fab{position:absolute;bottom:calc(76px + var(--safe-bottom));right:16px;width:52px;height:52px;border-radius:26px;background:var(--primary);color:#000;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px #10b98166;z-index:99}.fab svg{width:24px;height:24px;stroke:#000;stroke-width:2.5}.fab:active{transform:scale(.9)}.chat-container{display:flex;flex-direction:column;height:calc(100vh - 56px - 64px - var(--safe-top) - var(--safe-bottom));margin-top:calc(56px + var(--safe-top))}.messages-list{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}.msg-wrapper{display:flex;width:100%}.msg-wrapper.received{justify-content:flex-start}.msg-wrapper.sent{justify-content:flex-end}.msg-bubble{max-width:75%;padding:12px 16px;border-radius:16px;font-size:14px;line-height:1.4}.received .msg-bubble{background:#1e293b99;border:1px solid var(--border-color);color:var(--text-primary);border-bottom-left-radius:4px}.sent .msg-bubble{background:var(--primary);color:#000;border-bottom-right-radius:4px;font-weight:500}.msg-time{font-size:10px;color:var(--text-muted);margin-top:4px;text-align:right}.chat-input-bar{padding:12px 16px;border-top:1px solid var(--border-color);display:flex;gap:8px;align-items:center;background:#0f172acc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.drawer-backdrop{position:absolute;top:0;left:0;right:0;bottom:0;background:#0009;z-index:200;animation:fadeInBackground .2s ease forwards}.drawer{position:absolute;bottom:0;left:0;right:0;background:var(--bg-dark);border-top-left-radius:24px;border-top-right-radius:24px;border-top:1px solid var(--border-color);padding:24px 20px calc(24px + var(--safe-bottom)) 20px;z-index:201;box-shadow:0 -8px 30px #000c;transform:translateY(100%);animation:slideUp .3s cubic-bezier(.16,1,.3,1) forwards}@keyframes fadeInBackground{0%{opacity:0}to{opacity:1}}@keyframes slideUp{to{transform:translateY(0)}}.gacha-banner{background:linear-gradient(135deg,#10b98126,#3b82f61a);border:1px dashed rgba(16,185,129,.3);border-radius:16px;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;cursor:pointer;box-shadow:var(--shadow-sm);transition:all .2s ease}.gacha-banner:active{transform:scale(.98);background:linear-gradient(135deg,#10b98133,#3b82f626)}.card-flip-container{width:220px;height:320px;perspective:1000px;margin:20px auto}.card-flip-inner{position:relative;width:100%;height:100%;text-align:center;transition:transform .8s cubic-bezier(.175,.885,.32,1.275);transform-style:preserve-3d;cursor:pointer}.card-flipped{transform:rotateY(180deg)}.card-face{position:absolute;width:100%;height:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:24px;border:2px solid rgba(255,255,255,.1);display:flex;flex-direction:column;justify-content:center;align-items:center;box-shadow:var(--shadow-lg)}.card-face-front{background:linear-gradient(135deg,#0f172a,#1e293b);border:2px solid #10b981;box-shadow:0 0 15px #10b98133}.card-face-front:before{content:"";position:absolute;top:10px;left:10px;right:10px;bottom:10px;border:1px solid rgba(16,185,129,.2);border-radius:16px;pointer-events:none}.card-face-front .logo-glow{font-size:40px;filter:drop-shadow(0 0 8px #10b981);animation:pulseGlow 2s infinite alternate}@keyframes pulseGlow{0%{filter:drop-shadow(0 0 5px #10b981);transform:scale(1)}to{filter:drop-shadow(0 0 15px #10b981);transform:scale(1.08)}}.card-face-back{background:linear-gradient(135deg,#1e293b,#0f172a);transform:rotateY(180deg);border:2px solid #e2e8f0}.card-face-back.gold{border-color:#fbbf24;box-shadow:0 0 15px #fbbf244d}.card-face-back.blue{border-color:#3b82f6;box-shadow:0 0 15px #3b82f64d}.nav-item:active{transform:scale(.93);opacity:.8}.category-tab:active{transform:scale(.95);opacity:.85}.gacha-banner:active{transform:scale(.98);filter:brightness(1.1);transition:all .1s ease}.chat-item{transition:all .2s ease}.chat-item:active{background:var(--surface-light);transform:scale(.98)}.message-bubble{transition:all .15s cubic-bezier(.16,1,.3,1)}.message-bubble:active{transform:scale(.98);opacity:.95}.fab{transition:all .2s cubic-bezier(.175,.885,.32,1.275)}.fab:active{transform:scale(.88) rotate(9deg)}.page-container,div{scroll-behavior:smooth;-webkit-overflow-scrolling:touch}@keyframes zoomInMenu{0%{opacity:0;transform:scale(.9) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}body,#root,.chat-page-container-lock,.chat-page-container-lock *:not(.selectable-txt-container):not(.selectable-txt-container *){-webkit-touch-callout:none!important;-webkit-user-select:none!important;user-select:none!important}.selectable-txt-container,.selectable-txt-container *{-webkit-touch-callout:default!important;-webkit-user-select:text!important;user-select:text!important}@keyframes bannerIn{0%{opacity:0;transform:translateY(-16px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes tabIconPop{0%{transform:scale(1)}35%{transform:scale(.8)}70%{transform:scale(1.1)}to{transform:scale(1)}}.tab-pop-active svg,.tab-pop-active .tab-avatar-wrapper{animation:tabIconPop .28s cubic-bezier(.175,.885,.32,1.275) forwards}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}
