:root{--color-bg:#fafafa;--color-bg-secondary:#fff;--color-bg-card:#fff;--color-text-primary:#1a1a2e;--color-text-secondary:#64648c;--color-text-tertiary:#9e9eb8;--color-border:#e8e8f0;--color-border-hover:#d0d0e0;--color-accent:#4f46e5;--color-accent-light:#eef2ff;--color-accent-hover:#4338ca;--color-shadow:#0000000f;--color-shadow-hover:#0000001f;--color-tag-bg:#f0f0f8;--color-tag-text:#5b5b7a;--color-filter-active-bg:var(--color-accent);--color-filter-active-text:#fff;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--shadow-card:0 1px 3px var(--color-shadow), 0 1px 2px var(--color-shadow);--shadow-card-hover:0 8px 25px var(--color-shadow-hover), 0 4px 10px var(--color-shadow);--transition-fast:.2s cubic-bezier(.4, 0, .2, 1);--transition-normal:.3s cubic-bezier(.4, 0, .2, 1);--header-height:64px;--content-max-width:1200px;--content-padding:24px;--safe-area-top:env(safe-area-inset-top,0px);--safe-area-right:env(safe-area-inset-right,0px);--safe-area-bottom:env(safe-area-inset-bottom,0px);--safe-area-left:env(safe-area-inset-left,0px)}[data-theme=dark]{--color-bg:#0f0f1a;--color-bg-secondary:#1a1a2e;--color-bg-card:#1e1e35;--color-text-primary:#e8e8f0;--color-text-secondary:#a0a0be;--color-text-tertiary:#6e6e8c;--color-border:#2a2a45;--color-border-hover:#3a3a58;--color-accent:#6366f1;--color-accent-light:#1e1b4b;--color-accent-hover:#818cf8;--color-shadow:#0000004d;--color-shadow-hover:#00000080;--color-tag-bg:#262640;--color-tag-text:#b0b0cc;--color-filter-active-bg:var(--color-accent);--color-filter-active-text:#fff;--shadow-card:0 1px 3px var(--color-shadow), 0 1px 2px var(--color-shadow);--shadow-card-hover:0 8px 25px var(--color-shadow-hover), 0 4px 10px var(--color-shadow)}@media (width<=768px){:root{--content-padding:16px;--header-height:56px}}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100%}body{background-color:var(--color-bg);color:var(--color-text-primary);transition:background-color var(--transition-normal), color var(--transition-normal);min-height:100dvh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Inter,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.6}#root{min-height:inherit}a{color:inherit;text-decoration:none}button{cursor:pointer;background:0 0;border:none;font-family:inherit}::selection{background-color:var(--color-accent);color:#fff}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--color-text-tertiary)}.header{z-index:100;min-height:calc(var(--header-height) + var(--safe-area-top));padding-top:var(--safe-area-top);background:var(--color-bg-secondary);border-bottom:1px solid var(--color-border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:background-color var(--transition-normal), border-color var(--transition-normal);position:sticky;top:0}.header-inner{max-width:var(--content-max-width);padding:0 calc(var(--content-padding) + var(--safe-area-right)) 0 calc(var(--content-padding) + var(--safe-area-left));min-height:var(--header-height);justify-content:space-between;align-items:center;margin:0 auto;display:flex}.logo{align-items:center;gap:10px;display:flex}.logo-icon{background:linear-gradient(135deg, var(--color-accent), #7c3aed);border-radius:var(--radius-sm);color:#fff;justify-content:center;align-items:center;width:32px;height:32px;font-size:16px;font-weight:700;display:flex}.logo-text{color:var(--color-text-primary);letter-spacing:-.3px;font-size:18px;font-weight:600}.header-actions{align-items:center;gap:12px;display:flex}.search-box{width:220px;position:relative}.search-input{border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);width:100%;height:36px;color:var(--color-text-primary);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);outline:none;padding:0 12px 0 36px;font-size:13px}.search-input::placeholder{color:var(--color-text-tertiary)}.search-input:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-light)}.search-icon{color:var(--color-text-tertiary);pointer-events:none;font-size:14px;position:absolute;top:50%;left:10px;transform:translateY(-50%)}.theme-toggle{border-radius:var(--radius-sm);width:36px;height:36px;color:var(--color-text-secondary);transition:background-color var(--transition-fast), color var(--transition-fast);justify-content:center;align-items:center;font-size:18px;display:flex}.theme-toggle:hover{background:var(--color-tag-bg);color:var(--color-text-primary)}@media (width<=640px){.search-box{width:160px}}@media (width<=480px){.search-box{display:none}}.filter-bar{flex-wrap:wrap;gap:8px;display:flex}.filter-btn{color:var(--color-text-secondary);background:var(--color-bg-secondary);border:1px solid var(--color-border);transition:all var(--transition-fast);white-space:nowrap;border-radius:20px;padding:6px 16px;font-size:13px;font-weight:500}.filter-btn:hover{border-color:var(--color-border-hover);color:var(--color-text-primary)}.filter-btn.active{background:var(--color-filter-active-bg);color:var(--color-filter-active-text);border-color:#0000}.card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);cursor:pointer;transition:transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);box-shadow:var(--shadow-card);flex-direction:column;gap:14px;padding:24px;display:flex;position:relative;overflow:hidden}.card:before{content:"";background:linear-gradient(90deg, var(--color-accent), #7c3aed);opacity:0;height:3px;transition:opacity var(--transition-normal);position:absolute;top:0;left:0;right:0}.card:hover{box-shadow:var(--shadow-card-hover);border-color:var(--color-border-hover);transform:translateY(-4px)}.card:hover:before{opacity:1}.card:active{transform:translateY(-2px)}.card-header{align-items:center;gap:14px;display:flex}.card-icon{border-radius:var(--radius-md);background:var(--color-accent-light);width:48px;height:48px;color:var(--color-accent);transition:background-color var(--transition-normal), color var(--transition-normal);flex-shrink:0;justify-content:center;align-items:center;font-size:20px;font-weight:600;display:flex}.card:hover .card-icon{background:var(--color-accent);color:#fff}.card-title{color:var(--color-text-primary);font-size:16px;font-weight:600;line-height:1.3}.card-desc{color:var(--color-text-secondary);flex:1;font-size:13px;line-height:1.6}.card-footer{justify-content:space-between;align-items:center;gap:8px;display:flex}.card-tags{flex-wrap:wrap;gap:6px;display:flex}.card-tag{background:var(--color-tag-bg);color:var(--color-tag-text);border-radius:20px;padding:2px 8px;font-size:11px;font-weight:500}.card-arrow{color:var(--color-text-tertiary);transition:transform var(--transition-fast), color var(--transition-fast);font-size:14px}.card:hover .card-arrow{color:var(--color-accent);transform:translate(3px)}.card-enter{opacity:0;transform:translateY(20px)}.card-enter-active{opacity:1;transform:translateY(0)}@media (width<=480px){.card{padding:18px}.card-icon{width:40px;height:40px;font-size:16px}}.app-layout{flex-direction:column;min-height:100dvh;display:flex}.main{max-width:var(--content-max-width);padding:32px calc(var(--content-padding) + var(--safe-area-right)) 64px calc(var(--content-padding) + var(--safe-area-left));flex:1;width:100%;margin:0 auto}.hero{text-align:center;margin-bottom:40px}.hero-title{color:var(--color-text-primary);letter-spacing:-.5px;margin-bottom:8px;font-size:32px;font-weight:700}.hero-subtitle{color:var(--color-text-secondary);font-size:15px}.toolbar{justify-content:space-between;align-items:center;gap:16px;margin-bottom:28px;display:flex}.app-count{color:var(--color-text-tertiary);white-space:nowrap;font-size:13px}.grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px;display:grid}.empty-state{text-align:center;color:var(--color-text-tertiary);grid-column:1/-1;padding:64px 20px}.empty-icon{opacity:.4;margin-bottom:16px;font-size:48px}.empty-text{font-size:15px}.footer{text-align:center;padding:24px calc(var(--content-padding) + var(--safe-area-right)) calc(24px + var(--safe-area-bottom)) calc(var(--content-padding) + var(--safe-area-left));color:var(--color-text-tertiary);border-top:1px solid var(--color-border);font-size:12px}@media (width<=768px){.hero-title{font-size:24px}.toolbar{flex-direction:column;align-items:flex-start}.grid{grid-template-columns:1fr}}@media (width>=769px) and (width<=1024px){.grid{grid-template-columns:repeat(2,1fr)}}