:root{--bg:#f0f4f8;--card:#ffffff;--card-hover:#f8fafc;--border:#e2e8f0;--border-focus:#6366f1;--primary:#6366f1;--primary-light:#eef2ff;--primary-dark:#4f46e5;--text:#0f172a;--text-2:#475569;--text-3:#94a3b8;--success:#10b981;--radius:16px;--radius-sm:10px;--shadow:0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03);--shadow-md:0 4px 16px rgba(99,102,241,0.08), 0 2px 6px rgba(0,0,0,0.04);--shadow-lg:0 12px 32px rgba(99,102,241,0.12);--ff:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)--primary-gradient:linear-gradient(135deg,#6366f1 0%,#8b5cf6 50%,#a78bfa 100%);
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.wrap{animation:fadeInUp .6s ease-out}
.header-logo{animation:pulse 2s ease-in-out infinite}
}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.wrap{animation:fadeInUp .6s ease-out}
.header-logo{animation:pulse 2s ease-in-out infinite}
.btn-primary:hover{animation:shimmer 2s linear infinite;background-size:200% 100%}
}*,::after,::before{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}.header h2,body{color:var(--text)}body{font-family:var(--ff);background:linear-gradient(135deg,#f0f4f8 0%,#e8f0fe 50%,#f0e6ff 100%);min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:0;line-height:1.6;position:relative}body::before{content:;position:fixed;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 20%,rgba(99,102,241,0.08) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(139,92,246,0.06) 0%,transparent 50%);pointer-events:none;z-index:-1}h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.wrap{max-width:640px;width:100%;margin:0 auto 60px;padding:0 20px;position:relative;z-index:1}.header{text-align:center;padding:48px 0 32px;margin-bottom:28px}.header-logo{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:16px;background:var(--primary-gradient);color:#fff;font-size:22px;font-weight:800;letter-spacing:-.5px;margin-bottom:20px;transition:all .3s;box-shadow:0 8px 24px rgba(99,102,241,0.3)}.header-logo:hover{transform:scale(1.04)}.header h2{font-size:28px;font-weight:800;letter-spacing:-.3px;line-height:1.2;margin-bottom:8px;background:var(--primary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.header p{font-size:15px;color:var(--text-2);max-width:380px;margin:0 auto;line-height:1.6}.tabs{display:flex;gap:0;margin-bottom:20px;border-bottom:1px solid var(--border)}.tab{padding:12px 20px;border:0;background:0 0;color:var(--text-3);font-size:13px;font-weight:600;cursor:pointer;font-family:var(--ff);transition:all .2s;border-bottom:2px solid transparent;margin-bottom:-1px}.tab.on{color:var(--primary);border-bottom-color:var(--primary)}.tab:not(.on):hover{color:var(--text-2)}.panel{display:none}.fg,.panel.on{display:flex;flex-direction:column;gap:16px}.fg{gap:6px}.fg label{font-size:12px;font-weight:600;color:var(--text-2)}.fg input,.fg textarea{padding:12px 14px}.fg input,.fg select,.fg textarea{width:100%;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--card);color:var(--text);font-size:14px;font-family:var(--ff);transition:all .2s;outline:0}.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--border-focus);box-shadow:0 0 0 3px rgba(37,99,235,.08)}.fg input::placeholder,.fg textarea::placeholder{color:var(--text-3)}.fg textarea{resize:vertical;min-height:60px}.fg select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239ca3af' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding:12px 36px 12px 14px}.row{display:flex;gap:8px;align-items:center}.btn{padding:12px 20px;border:0;border-radius:var(--radius-sm);font-size:14px;font-weight:600;cursor:pointer;font-family:var(--ff);transition:all .2s}.btn:active{transform:scale(.98)}.btn-primary{width:100%;padding:14px 0;font-size:15px;font-weight:600;background:var(--primary-gradient);color:#fff;box-shadow:0 4px 16px rgba(99,102,241,0.3);border-radius:var(--radius-sm);transition:all .3s}.btn-primary:hover{background:var(--primary-dark);box-shadow:var(--shadow-md)}.btn-secondary,.result-card{background:var(--card);border:1px solid var(--border)}.btn-secondary{color:var(--text-2);padding:8px 16px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;cursor:pointer;font-family:var(--ff);transition:all .2s}.btn-secondary:hover{background:var(--card-hover);color:var(--text);border-color:#d1d5db}.result-card{display:none;flex-direction:column;gap:14px;border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-md);background:rgba(255,255,255,0.9);backdrop-filter:blur(8px);border:1px solid rgba(99,102,241,0.15)}.result-card.show{display:flex}.qr-type.on,.result-url{color:var(--primary);background:var(--primary-light)}.result-url{font-size:14px;font-weight:600;word-break:break-all;padding:14px 18px;border-radius:var(--radius-sm);border:2px dashed rgba(99,102,241,0.3);text-align:center;background:rgba(99,102,241,0.03)}.result-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.qr-types{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.qr-type{padding:9px 2px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--card);color:var(--text-3);font-size:11px;font-weight:600;cursor:pointer;text-align:center;transition:all .2s;font-family:var(--ff)}.qr-type.on{border-color:var(--primary)}.qr-type:not(.on):hover{border-color:#d1d5db;color:var(--text-2)}.qr-field{display:none;flex-direction:column;gap:12px}.qr-field.on,.qr-preview.show{display:flex}.qr-box,.qr-preview{border:1px solid var(--border);box-shadow:var(--shadow)}.qr-preview{display:none;flex-direction:column;align-items:center;gap:16px;padding:24px;background:rgba(255,255,255,0.9);backdrop-filter:blur(8px);border-radius:var(--radius);border:1px solid rgba(255,255,255,0.6);box-shadow:var(--shadow-md)}.qr-box{background:#fff;border-radius:12px;padding:16px}.qr-box img,.qr-box svg{display:block!important;width:200px!important;height:200px!important;border-radius:4px}.qr-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.hint{margin-top:2px;color:var(--text-3);font-size:12px;line-height:1.6;text-align:left;background:var(--card-hover);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px}.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:28px 0 0}.feature{background:rgba(255,255,255,0.8);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.6);border-radius:var(--radius);padding:20px;transition:all .3s;box-shadow:var(--shadow)}.feature:hover{box-shadow:var(--shadow-lg);border-color:rgba(99,102,241,0.3);transform:translateY(-2px)}.feature strong{display:block;font-size:14px;margin-bottom:4px}.feature span{color:var(--text-2);font-size:12px;line-height:1.5;display:block}.faq-item strong,.feature strong{color:var(--text);font-weight:700;font-size:14px}.seo h2{color:var(--text);font-weight:700;font-size:17px;margin:32px 0 12px;padding-bottom:8px;border-bottom:2px solid var(--primary-light)}.seo h2{font-size:16px;margin:28px 0 10px}.faq-item p,.seo p{color:var(--text-2);font-size:13px;line-height:1.8;margin:0 0 14px}.related h3,.seo a{color:var(--primary);font-weight:600}.faq-list{display:flex;flex-direction:column;gap:8px}.faq-item{background:rgba(255,255,255,0.8);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.6);border-radius:var(--radius);padding:16px 18px;transition:all .3s;box-shadow:var(--shadow)}.faq-item:hover{background:rgba(255,255,255,0.95);box-shadow:var(--shadow-md);transform:translateY(-1px)}.faq-item strong{display:block;font-size:13px;margin-bottom:4px}.faq-item p{font-size:12px;line-height:1.6;margin:0}.kws{color:var(--text-3)!important;font-size:12px!important;margin-top:20px!important}.adsense-wrap{display:flex;justify-content:center;padding:8px 0;min-height:90px;overflow:hidden}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--text);color:#fff;padding:10px 24px;border-radius:var(--radius-sm);font-size:13px;font-weight:500;opacity:0;transition:all .35s;pointer-events:none;z-index:999;box-shadow:var(--shadow-lg)}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.footer,.footer a{color:var(--text-3)}.footer{text-align:center;padding:32px 0;margin-top:40px;border-top:1px solid rgba(99,102,241,0.1);font-size:12px;line-height:1.8;color:var(--text-3)}.footer a{text-decoration:none;font-weight:600;transition:color .2s}.breadcrumb a,.footer a:hover{color:var(--primary)}@media (max-width:480px){.wrap{padding:0 14px}.header{padding:32px 0 0}.header h2{font-size:22px}.feature-grid{grid-template-columns:1fr}.qr-types{grid-template-columns:repeat(3,1fr)}.result-actions{gap:6px}.btn-secondary{padding:8px 12px;font-size:12px}}.breadcrumb{font-size:12px;color:var(--text-3);margin-bottom:16px;padding:0}.breadcrumb a{text-decoration:none;font-weight:500}.breadcrumb a:hover,.related a:hover{text-decoration:underline}.links-section,.related{background:var(--card);border:1px solid var(--border);margin-top:20px}.related{border-radius:10px;padding:16px 20px;text-align:center}.related h3{font-size:13px;color:var(--text-2);margin:0 0 8px}.related a{font-size:13px;font-weight:500;margin:0 6px}.links-section{border-radius:12px;padding:20px 24px;box-shadow:var(--shadow)}.links-section h2{font-size:15px;font-weight:700;color:var(--text);margin:0 0 16px}.links-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.link-card{display:block;padding:14px 12px;background:linear-gradient(135deg,#f0f4f8 0%,#e8f0fe 50%,#f0e6ff 100%);border:1px solid var(--border);border-radius:10px;text-decoration:none;text-align:center;transition:all .25s}.link-card:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow-md)}.link-icon{font-size:24px;margin-bottom:6px}.link-name{font-size:13px;font-weight:700;color:var(--text);margin-bottom:2px}.link-desc,.links-hint{font-size:11px;color:var(--text-3)}.links-hint{margin:14px 0 0;text-align:center}.links-hint a,.nav-links a,.related a{color:var(--primary);text-decoration:none}@media (max-width:480px){.links-grid{grid-template-columns:repeat(2,1fr)}}.top-nav{background:var(--card);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.nav-inner{max-width:900px;margin:0 auto;padding:0 16px;display:flex;align-items:center;height:48px;gap:20px}.nav-logo{color:var(--primary);letter-spacing:-.5px}.nav-links{display:flex;gap:4px;flex:1}.nav-links a{padding:6px 12px;font-size:13px;color:var(--text-2);border-radius:6px;transition:all .2s;font-weight:500}.nav-links a:hover{background:linear-gradient(135deg,#f0f4f8 0%,#e8f0fe 50%,#f0e6ff 100%);color:var(--text)}.nav-links .nav-active,.site-nav .article-bottom-nav a.active,.site-nav .article-bottom-nav a:hover{color:var(--primary);background:var(--primary-light)}.nav-right,.nav-user{display:flex;align-items:center}.nav-user{gap:8px;font-size:12px}.nav-avatar{width:24px;height:24px;border-radius:50%}.nav-name{color:var(--text);font-weight:600}.nav-logout{color:var(--text-3);text-decoration:none;font-size:11px;padding:3px 8px;border-radius:4px;background:linear-gradient(135deg,#f0f4f8 0%,#e8f0fe 50%,#f0e6ff 100%)}.nav-logout:hover{color:#dc2626}.nav-login-btn{padding:5px 14px;background:var(--primary);color:#fff;border-radius:8px;text-decoration:none;font-size:12px;font-weight:600;transition:all .2s}.nav-login-btn:hover{opacity:.9;transform:translateY(-1px)}.body-pg{padding-top:0}@media (max-width:480px){.nav-links a{font-size:11px;padding:4px 8px}.nav-name{display:none}}.nav-logo,.page-nav{display:flex;align-items:center}.page-nav{justify-content:space-between;padding:12px 16px;max-width:720px;margin:0 auto}.nav-logo{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#667eea,#764ba2);justify-content:center;font-size:16px;font-weight:800;color:#fff;text-decoration:none;transition:transform .2s}.nav-logo:hover{transform:scale(1.05)}.nav-title{font-size:15px;font-weight:600;color:var(--text)}.site-nav .article-bottom-nav{display:flex;gap:4px}.site-nav .article-bottom-nav a{padding:6px 12px;font-size:13px;font-weight:500;color:var(--text-2);text-decoration:none;border-radius:6px;transition:all .15s}