:root{--color-primary:#10b981;--color-primary-dark:#059669}body{color:#374151;min-height:100vh;font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.6}#app{min-height:100vh}.container{max-width:1200px;margin:0 auto;padding:0 1rem}.glass{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffffd9;border:1px solid #ffffff4d}.sticky{z-index:40;position:sticky;top:0}.btn-primary{color:#fff;cursor:pointer;text-align:center;background:#10b981;border:none;border-radius:.5rem;padding:.75rem 1.5rem;font-weight:500;text-decoration:none;transition:all .3s;display:inline-block}.btn-primary:hover{background:#059669;box-shadow:0 10px 25px #10b9814d}.btn-secondary{color:#374151;cursor:pointer;background:#fffc;border:1px solid #e5e7eb;border-radius:.5rem;padding:.5rem 1rem;font-weight:500;text-decoration:none;transition:all .3s;display:inline-block}.btn-secondary:hover{background:#fff;border-color:#10b981}.grid{gap:1.5rem;display:grid}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}@media (width<=640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=1024px){.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.text-xl{font-size:1.25rem}.text-2xl{font-size:1.5rem}.text-3xl{font-size:1.875rem}.text-4xl{font-size:2.25rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.text-center{text-align:center}.text-gray-500{color:#6b7280}.text-gray-600{color:#4b5563}.text-gray-700{color:#374151}.text-gray-800{color:#1f2937}.text-gray-400{color:#9ca3af}.text-white{color:#fff}.text-emerald-600{color:#059669}.card{cursor:pointer;background:#fff;border-radius:1rem;transition:all .3s;overflow:hidden}.card:hover{transform:translateY(-4px);box-shadow:0 20px 40px #0000001a}.card img{object-fit:cover;width:100%;height:200px}.card-content{padding:1rem}.card-content h3{margin-bottom:.5rem;font-size:1rem;font-weight:600}.card-content p{color:#6b7280;font-size:.875rem}.price-tag{color:#10b981;font-size:1.5rem;font-weight:700}.badge{color:#fff;background:#10b981;border-radius:9999px;padding:.25rem .75rem;font-size:.875rem;font-weight:600;display:inline-block}.modal-backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:50;background:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#fffffff2;border-radius:1rem;width:100%;max-width:32rem;max-height:90vh;margin:0 1rem;padding:2rem;position:relative;overflow:auto}.modal-close{color:#6b7280;cursor:pointer;background:0 0;border:none;font-size:1.5rem;position:absolute;top:1rem;right:1rem}.modal-close:hover{color:#374151}input{border:1px solid #e5e7eb;border-radius:.5rem;padding:.5rem .75rem;font-size:.875rem}input:focus{border-color:#10b981;outline:none}.h-full{height:100%}.rounded-xl{border-radius:.75rem}.rounded-lg{border-radius:.5rem}.rounded-full{border-radius:9999px}.overflow-hidden{overflow:hidden}.overflow-auto{overflow:auto}.cursor-pointer{cursor:pointer}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.animate-pulse{animation:2s cubic-bezier(.4,0,.6,1) infinite pulse}.bg-white{background:#fff}.bg-white\/80{background:#fffc}.bg-emerald-500{background:#10b981}.bg-emerald-600{background:#059669}.bg-gradient-to-br{background:linear-gradient(to bottom right, var(--tw-gradient-from), var(--tw-gradient-to))}.from-emerald-400{--tw-gradient-from:#34d399}.to-emerald-600{--tw-gradient-to:#059669}.bg-gray-50{background:#f9fafb}.bg-gray-100{background:#f3f4f6}.bg-gray-200{background:#e5e7eb}.text-xs{font-size:.75rem}.text-sm{font-size:.875rem}.text-lg{font-size:1.125rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mb-8{margin-bottom:2rem}.pb-8{padding-bottom:2rem}.pt-12{padding-top:3rem}.max-w-7xl{max-width:80rem}.max-w-2xl{max-width:42rem}.max-w-md{max-width:28rem}.max-w-4xl{max-width:56rem}.shadow-lg{box-shadow:0 10px 15px -3px #0000001a}.shadow-xl{box-shadow:0 20px 25px -5px #0000001a}.min-h-screen{min-height:100vh}.top-0{top:0}.right-0{right:0}.right-3{right:.75rem}.right-4{right:1rem}.top-3{top:.75rem}.top-4{top:1rem}.left-0{left:0}.bottom-0{bottom:0}.inset-0{inset:0}.absolute{position:absolute}.relative{position:relative}.transition-all{transition:all .3s}.border{border-width:1px}.border-t{border-top-width:1px}.border-gray-200{border-color:#e5e7eb}.line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.flex-wrap{flex-wrap:wrap}.justify-center{justify-content:center}.h-48{height:12rem}.h-10{height:2.5rem}.h-4{height:1rem}.w-10{width:2.5rem}.w-full{width:100%}.hover\:bg-white:hover{background:#fff}.hover\:shadow-emerald-500\/30:hover{box-shadow:0 10px 15px -3px #10b9814d}.hover\:text-emerald-700:hover{color:#047857}@keyframes slideIn{0%{opacity:0;transform:translate(110%)}to{opacity:1;transform:translate(0)}}.img{border-radius:20px;width:100%;margin-bottom:16px;padding:30px;overflow:hidden}.img img{border-radius:20px;width:100%;display:block}.sidebar h2{margin:0 0 8px;font-size:20px;font-weight:700}.dark h2{color:#fff}.sidebar p{color:#86868b;margin:0 0 16px;font-size:14px;line-height:1.5}.features h4{color:#aeaeb2;text-transform:uppercase;letter-spacing:.5px;margin:0 0 10px;font-size:12px;font-weight:600}.features ul{margin:0;padding:0;list-style:none}.features li{color:#86868b;border-bottom:1px solid #00000014;padding:10px 0;font-size:14px}.dark .features li{border-color:#ffffff14}.foot{align-items:center;gap:16px;margin-top:24px;display:flex}.price{align-items:baseline;display:flex}.price span{color:#3a3a3c;font-size:16px;font-weight:600}.price strong{color:#3a3a3c;font-size:28px;font-weight:700}.dark .price span,.dark .price strong{color:#fff}.foot .btn{color:#fff;cursor:pointer;background:#3a3a3c;border:none;border-radius:12px;flex:1;margin:0;padding:14px;font-size:16px;font-weight:600}.dark .foot .btn{background:#555}.dark .foot .btn:hover{background:#666}.sidebar{-webkit-backdrop-filter:blur(20px)brightness(120%);z-index:501;background:#ffffffd9;border:1px solid #ffffff4d;border-radius:20px;width:100%;max-width:380px;height:100%;padding:24px;animation:.3s slideIn;position:relative;overflow-y:auto;box-shadow:20px 20px 50px #00000026}.dark.sidebar{-webkit-backdrop-filter:blur(20px)brightness(110%);background:#1c1c1ee6;border-color:#ffffff1a}.close-area{cursor:pointer;position:absolute;inset:0}.close{cursor:pointer;z-index:10;background:#0000001a;border:none;border-radius:50%;width:28px;height:28px;font-size:18px;position:absolute;top:16px;right:16px}.dark .close{background:#ffffff1a}.content{padding:20px 0}.qr-box{text-align:center;background:#0000000d;border-radius:16px;margin:20px 0;padding:24px}.dark .qr-box{background:#ffffff0d}.qr-box img{max-width:200px;height:auto}.check{color:#fff;background:#3a3a3c;border-radius:50%;justify-content:center;align-items:center;width:64px;height:64px;margin:20px auto;font-size:32px;display:flex}.checking{color:#3a3a3c;text-align:center;margin-top:12px;font-size:13px}.dark .checking{color:#ccc}.success .btn{color:#fff;text-align:center;cursor:pointer;background:#3a3a3c;border:none;border-radius:12px;width:100%;margin:0;padding:16px;font-size:16px;font-weight:600;display:block}.dark .success .btn{background:#555}.dark .success .btn:hover{background:#666}.success{text-align:center;padding-top:40px}.sidebar-wrapper{z-index:600;justify-content:flex-end;display:flex;position:fixed;inset:20px}.sidebar{z-index:601;-webkit-backdrop-filter:blur(24px)brightness(115%);background:#ffffffe0;border:1px solid #ffffff80;border-radius:24px;width:100%;max-width:400px;height:100%;padding:32px;animation:.35s cubic-bezier(.16,1,.3,1) slideIn;position:relative;overflow-y:auto;box-shadow:0 25px 60px #0000001f}.dark.sidebar{-webkit-backdrop-filter:blur(24px)brightness(105%);background:#1c1c1eeb;border-color:#ffffff14;box-shadow:0 25px 60px #0006}.close{color:#8e8e93;cursor:pointer;background:#0000000f;border:none;border-radius:50%;width:32px;height:32px;font-size:20px;transition:all .2s;position:absolute;top:20px;right:20px}.dark .close{color:#8e8e93;background:#ffffff14}.close:hover{background:#0000001f}.dark .close:hover{background:#ffffff26}.icon{color:#fff;background:linear-gradient(135deg,#3a3a3c 0%,#1c1c1e 100%);border-radius:50%;justify-content:center;align-items:center;width:72px;height:72px;margin:48px auto 20px;font-size:36px;display:flex;box-shadow:0 8px 24px #00000026}.dark .icon{background:linear-gradient(135deg,#48484a 0%,#2c2c2e 100%);box-shadow:0 8px 24px #0006}.sidebar h3{color:#1c1c1e;text-align:center;letter-spacing:-.3px;margin:0 0 6px;font-size:22px;font-weight:700}.dark h3{color:#f5f5f7}.sidebar p{margin:16px 0}.name{color:#8e8e93;text-align:center;margin:0 0 28px;font-size:14px}.field{margin-bottom:20px}.field label{color:#8e8e93;text-transform:uppercase;letter-spacing:.5px;margin:24px 0 10px;font-size:12px;font-weight:600;display:block}.dark label{color:#98989d}.field:first-of-type label{margin-top:0}.row{gap:10px;display:flex}.row input{color:#1c1c1e;background:#0000000a;border:1px solid #00000014;border-radius:12px;outline:none;flex:1;padding:14px 16px;font-size:14px;transition:all .2s}.dark .row input{color:#f5f5f7;background:#ffffff0f;border-color:#ffffff1a}.row input:focus{border-color:#3a3a3c;box-shadow:0 0 0 3px #3a3a3c1a}.dark .row input:focus{border-color:#555;box-shadow:0 0 0 3px #ffffff1a}.row input.short{flex:0 0 100px;max-width:100px}.row button{color:#fff;cursor:pointer;white-space:nowrap;background:#3a3a3c;border:none;border-radius:12px;padding:14px 20px;font-size:14px;font-weight:600;transition:all .2s}.dark .row button{background:#48484a}.row button:hover{background:#1c1c1e;transform:translateY(-1px)}.dark .row button:hover{background:#636366}.row button:active{transform:translateY(0)}.dark .row button:active,.row button.copied{background:#636366}.dark .row button.copied{background:#8e8e93}.btn{color:#fff;text-align:center;background:linear-gradient(135deg,#3a3a3c 0%,#1c1c1e 100%);border-radius:14px;justify-content:center;align-items:center;gap:8px;margin:0;padding:16px;font-size:15px;font-weight:600;text-decoration:none;transition:all .2s;display:flex;box-shadow:0 4px 16px #0000001a}.dark .btn{background:linear-gradient(135deg,#48484a 0%,#2c2c2e 100%);box-shadow:0 4px 16px #0000004d}.btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px #00000026}.dark .btn:hover{background:linear-gradient(135deg,#636366 0%,#48484a 100%);box-shadow:0 8px 24px #0006}.tip{color:#aeaeb2;text-align:center;margin-top:20px;font-size:13px;font-weight:500}.dark .tip{color:#98989d}@font-face{font-family:Noto Sans SC;src:url(/fonts/NotoSans-Regular-2.ttf)format("truetype");font-weight:400;font-style:normal}@font-face{font-family:Noto Sans SC;src:url(/fonts/NotoSans-Italic-3.ttf)format("truetype");font-weight:400;font-style:italic}@font-face{font-family:Noto Sans SC;src:url(/fonts/NotoSans-Bold-5.ttf)format("truetype");font-weight:700;font-style:normal}@font-face{font-family:Noto Sans SC;src:url(/fonts/NotoSans-BoldItalic-4.ttf)format("truetype");font-weight:700;font-style:italic}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Noto Sans SC,-apple-system,sans-serif}.bg-layer{z-index:-1;background:radial-gradient(at 50% 70%,#f0f0f5 70%,#fff 80%),radial-gradient(at 30% 30%,#fafafa 100%,#fff 70%);animation:8s ease-in-out infinite alternate fluidBg;position:fixed;inset:0}.bg-layer.dark{background:radial-gradient(at 30% 30%,#28282d 0%,#141414 50%),radial-gradient(at 70% 70%,#1a1a1a 0%,#0a0a0a 100%)}@keyframes fluidBg{0%{transform:scale(1)}to{transform:scale(1.1)}}.site{color:#1d1d1f;background:0 0;min-height:100vh;padding:20px;position:relative}.site.dark{color:#f5f5f7}.header{z-index:100;margin-bottom:20px;position:sticky;top:20px}.header .blur{filter:blur(25px);z-index:-1;background:#f0f0f5e6;border-radius:20px;position:absolute;inset:0;transform:scale(1.1)}.header .blur.dark{background:#1c1c1ee6}.header-inner{background:#ffffff4d;border:1px solid #ffffff26;border-radius:20px;justify-content:space-between;align-items:center;padding:16px 24px;display:flex;position:relative}.header-inner.dark{background:#1c1c1e4d;border-color:#ffffff1a}.header-inner{max-width:1100px;margin:0 auto}.logo-box{align-items:center;gap:12px;display:flex}.logo{background:linear-gradient(135deg,#3a3a3c,#1c1c1e);border-radius:10px;justify-content:center;align-items:center;width:40px;height:40px;font-size:18px;display:flex}.logo-img{object-fit:cover;width:40px;height:40px}.logo-img.dark{filter:brightness(0)invert()}.title h1{font-size:18px;font-weight:700}.title p{color:#86868b;font-size:11px}.theme-btn{cursor:pointer;background:#f5f5f7;border:none;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;display:flex}.dark .theme-btn{background:#2c2c2e}.theme-icon{width:20px;height:20px}.theme-icon.dark{filter:brightness(0)invert()}.hero{text-align:center;padding:48px 24px 32px}.hero h2{margin-bottom:8px;font-size:36px;font-weight:700}.hero p{color:#86868b;font-size:16px}.filter-box{justify-content:center;gap:8px;padding:0 24px 28px;display:flex}.tab{color:#86868b;cursor:pointer;background:#fff;border:1px solid #e5e5e5;border-radius:20px;padding:10px 20px;font-size:14px;transition:all .2s}.dark .tab{color:#98989d;background:#1c1c1e;border-color:#38383a}.tab:hover{color:#3a3a3c;border-color:#3a3a3c}.tab.active{color:#fff;background:#3a3a3c;border-color:#3a3a3c}.product-list{grid-template-columns:repeat(3,1fr);gap:20px;max-width:1100px;margin:0 auto;padding:0 24px 80px;display:grid}.item{cursor:pointer;background:linear-gradient(145deg,#fffffff2 0%,#f5f5faf2 50%,#f0f0f8f2 100%);border-radius:16px;transition:transform .3s;overflow:hidden;box-shadow:0 4px 20px #00000014}.dark .item{background:linear-gradient(145deg,#323237f2 0%,#28282df2 50%,#232328f2 100%);box-shadow:0 4px 20px #0000004d}.item:hover{transform:translateY(-4px)}.item-img{aspect-ratio:1;padding:30px;position:relative}.item-img img{object-fit:cover;border-radius:20px;width:100%;height:100%}.item-info{padding:14px}.item-info h3{margin-bottom:4px;font-size:15px;font-weight:600}.item-info p{color:#86868b;text-overflow:ellipsis;white-space:nowrap;margin-bottom:12px;font-size:13px;overflow:hidden}.item-bottom{justify-content:space-between;align-items:center;display:flex}.cat{color:#aeaeb2;background:#f5f5f7;border-radius:6px;padding:4px 8px;font-size:11px}.dark .cat{color:#98989d;background:#2c2c2e}.btn{color:#fff;cursor:pointer;background:#3a3a3c;border:none;border-radius:10px;padding:8px 16px;font-size:13px;font-weight:600}.btn:hover{background:#1c1c1e}.footer{color:#8e8e93;padding:32px 24px 40px;font-size:13px}.footer-inner{justify-content:space-between;align-items:center;max-width:1100px;margin:0 auto;display:flex}.footer p{margin:0}.footer a{color:#8e8e93;text-decoration:none;transition:color .2s}.footer a:hover{color:#3a3a3c}.dark .footer a:hover{color:#f5f5f7}.footer .beian{font-size:12px}@media (width<=800px){.product-list{grid-template-columns:repeat(2,1fr)}.footer-inner{text-align:center;flex-direction:column;gap:8px}}@media (width<=500px){.product-list{grid-template-columns:1fr}.hero h2{font-size:28px}.header-inner,.hero,.filter-box,.product-list{padding-left:16px;padding-right:16px}}