@zhang_jifan/fanui 2.1.0

package/dist/modules/fanui-blog.min.css

@@ -0,0 +1,108 @@
+.fanui-read-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--fanui-space-2);font-size:var(--fanui-font-size-sm);color:var(--fanui-color-text-subtle)}
+.fanui-read-meta__dot{width:3px;height:3px;border-radius:var(--fanui-radius-full);background-color:currentColor;opacity:0.6}
+.fanui-read-meta__author{display:inline-flex;align-items:center;gap:var(--fanui-space-2);color:var(--fanui-color-text-muted);font-weight:var(--fanui-font-weight-medium)}
+.fanui-read-meta__badge{padding:1px 8px;font-size:var(--fanui-font-size-xs);font-weight:var(--fanui-font-weight-semibold);color:var(--fanui-primary-ink);background-color:var(--fanui-primary-soft-2);border-radius:var(--fanui-radius-full)}
+.fanui-post-card{position:relative;display:flex;flex-direction:column;gap:var(--fanui-space-3);overflow:hidden;border:1px solid var(--fanui-color-border);border-radius:var(--fanui-radius-xl);background-color:var(--fanui-color-surface);text-decoration:none;color:inherit;transition:transform 200ms cubic-bezier(0.4,0,0.2,1) 0s,box-shadow 200ms cubic-bezier(0.4,0,0.2,1) 0s,border-color 200ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-post-card:hover{transform:translateY(-3px);border-color:var(--fanui-primary-border);box-shadow:var(--fanui-shadow-lg)}
+.fanui-post-card:hover .fanui-post-card__cover img{transform:scale(1.04)}
+.fanui-post-card:hover .fanui-post-card__title{color:var(--fanui-primary)}
+.fanui-post-card__cover{position:relative;aspect-ratio:16/9;overflow:hidden;background-image:var(--fanui-brand-grad-soft)}
+.fanui-post-card__cover img{width:100%;height:100%;object-fit:cover;transition:transform 500ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-post-card__cover::after{content:"";position:absolute;inset:0;box-shadow:inset 0 -1px 0 rgba(2,6,23,0.06)}
+.fanui-post-card__body{display:flex;flex-direction:column;gap:var(--fanui-space-2);padding:var(--fanui-space-5)}
+.fanui-post-card__eyebrow{display:inline-flex;align-items:center;gap:var(--fanui-space-2);font-size:var(--fanui-font-size-xs);font-weight:var(--fanui-font-weight-semibold);letter-spacing:var(--fanui-tracking-wide);text-transform:uppercase;color:var(--fanui-primary)}
+.fanui-post-card__title{margin:0;font-size:var(--fanui-font-size-lg);font-weight:var(--fanui-font-weight-semibold);line-height:var(--fanui-line-height-snug);color:var(--fanui-color-text-strong);transition:color 150ms cubic-bezier(0.4,0,0.2,1) 0s;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}
+.fanui-post-card__excerpt{margin:0;font-size:var(--fanui-font-size-sm);line-height:var(--fanui-line-height-relaxed);color:var(--fanui-color-text-muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}
+.fanui-post-card__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--fanui-space-3);margin-top:auto;padding-top:var(--fanui-space-3);border-top:1px solid var(--fanui-color-border-subtle);font-size:var(--fanui-font-size-xs);color:var(--fanui-color-text-subtle)}
+.fanui-post-card--horizontal{flex-direction:row;align-items:stretch}
+.fanui-post-card--horizontal .fanui-post-card__cover{flex:0 0 38%;aspect-ratio:auto;min-height:132px}
+.fanui-post-card--horizontal .fanui-post-card__body{justify-content:center}@media (max-width:575.95px){.fanui-post-card--horizontal{flex-direction:column}
+.fanui-post-card--horizontal .fanui-post-card__cover{aspect-ratio:16/9;flex:none}}
+.fanui-post-card--plain{border:0;border-radius:0;border-bottom:1px solid var(--fanui-color-border-subtle);background:transparent}
+.fanui-post-card--plain:hover{transform:none;box-shadow:none}
+.fanui-post-card--plain .fanui-post-card__body{padding:var(--fanui-space-4) 0}
+.fanui-post-card--overlay{position:relative;border:0;justify-content:flex-end;min-height:260px;background:linear-gradient(180deg,transparent 30%,rgba(2,6,23,0.72) 100%)}
+.fanui-post-card--overlay .fanui-post-card__cover{position:absolute;inset:0;aspect-ratio:auto}
+.fanui-post-card--overlay .fanui-post-card__cover::after{background:linear-gradient(180deg,transparent 24%,rgba(2,6,23,0.78) 100%)}
+.fanui-post-card--overlay .fanui-post-card__body{position:relative;z-index:1;color:#ffffff}
+.fanui-post-card--overlay .fanui-post-card__title,.fanui-post-card--overlay .fanui-post-card__excerpt,.fanui-post-card--overlay .fanui-post-card__eyebrow{color:#ffffff}
+.fanui-post-card--overlay .fanui-post-card__excerpt{opacity:0.85}
+.fanui-post-card--overlay .fanui-post-card__foot{border-top-color:rgba(255,255,255,0.24);color:rgba(255,255,255,0.8)}
+.fanui-article{max-width:var(--fanui-article-width,720px);margin-inline:auto}
+.fanui-article__header{display:flex;flex-direction:column;gap:var(--fanui-space-4);padding-block:var(--fanui-space-8) var(--fanui-space-6);text-align:center;align-items:center}
+.fanui-article__eyebrow{font-size:var(--fanui-font-size-sm);font-weight:var(--fanui-font-weight-semibold);letter-spacing:var(--fanui-tracking-wider);text-transform:uppercase;color:var(--fanui-primary)}
+.fanui-article__title{margin:0;font-size:clamp(1.75rem,4vw,2.75rem);font-weight:var(--fanui-font-weight-extrabold);line-height:1.15;letter-spacing:var(--fanui-tracking-tight);color:var(--fanui-color-text-strong);text-wrap:balance}
+.fanui-article__lead{margin:0;max-width:620px;font-size:var(--fanui-font-size-lg);line-height:var(--fanui-line-height-relaxed);color:var(--fanui-color-text-muted);text-wrap:pretty}
+.fanui-article__cover{margin-block:var(--fanui-space-6);border-radius:var(--fanui-radius-2xl);overflow:hidden}
+.fanui-article__cover img{display:block;width:100%;height:auto}
+.fanui-article__footer{display:flex;flex-direction:column;gap:var(--fanui-space-6);margin-top:var(--fanui-space-10);padding-top:var(--fanui-space-8);border-top:1px solid var(--fanui-color-border)}
+.fanui-article__callout{display:flex;gap:var(--fanui-space-3);margin-block:var(--fanui-space-6);padding:var(--fanui-space-4) var(--fanui-space-5);border-inline-start:3px solid var(--fanui-primary);border-radius:var(--fanui-radius-md);background-color:var(--fanui-primary-soft);color:var(--fanui-primary-ink);font-size:var(--fanui-font-size-sm);line-height:var(--fanui-line-height-relaxed)}
+.fanui-article--with-toc{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:var(--fanui-space-12);max-width:1080px}@media (max-width:991.95px){.fanui-article--with-toc{grid-template-columns:minmax(0,1fr)}}
+.fanui-toc{position:sticky;top:calc(var(--fanui-space-10) + 60px);align-self:start;max-height:calc(100vh - 140px);overflow-y:auto;padding-inline-start:var(--fanui-space-4);border-inline-start:1px solid var(--fanui-color-border);font-size:var(--fanui-font-size-sm);scrollbar-width:thin;scrollbar-color:rgba(100,116,139,0.45) transparent}
+.fanui-toc::-webkit-scrollbar{width:6px;height:6px}
+.fanui-toc::-webkit-scrollbar-track{background:transparent}
+.fanui-toc::-webkit-scrollbar-thumb{background:rgba(100,116,139,0.45);border-radius:9999px}
+.fanui-toc::-webkit-scrollbar-thumb:hover{background:rgba(100,116,139,0.7)}@media (max-width:991.95px){.fanui-toc{position:static;max-height:none;margin-bottom:var(--fanui-space-6)}}
+.fanui-toc__title{margin-bottom:var(--fanui-space-3);font-size:var(--fanui-font-size-xs);font-weight:var(--fanui-font-weight-semibold);letter-spacing:var(--fanui-tracking-wider);text-transform:uppercase;color:var(--fanui-color-text-subtle)}
+.fanui-toc__list{display:flex;flex-direction:column;gap:2px;margin:0;padding:0;list-style:none}
+.fanui-toc__link{display:block;padding:5px 10px;border-radius:var(--fanui-radius-sm);color:var(--fanui-color-text-muted);text-decoration:none;line-height:var(--fanui-line-height-snug);border-inline-start:2px solid transparent;transition:color 150ms cubic-bezier(0.4,0,0.2,1) 0s,background-color 150ms cubic-bezier(0.4,0,0.2,1) 0s,border-color 150ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-toc__link:hover{color:var(--fanui-color-text);background-color:var(--fanui-color-hover)}
+.fanui-toc__link.is-active{color:var(--fanui-primary);border-inline-start-color:var(--fanui-primary);background-color:var(--fanui-primary-soft);font-weight:var(--fanui-font-weight-medium)}
+.fanui-toc__list .fanui-toc__list{margin-inline-start:var(--fanui-space-3)}
+.fanui-toc__progress{margin-top:var(--fanui-space-4);padding-top:var(--fanui-space-3);border-top:1px solid var(--fanui-color-border-subtle);font-size:var(--fanui-font-size-xs);color:var(--fanui-color-text-subtle);font-variant-numeric:tabular-nums}
+.fanui-author{display:flex;gap:var(--fanui-space-4);padding:var(--fanui-space-5);border-radius:var(--fanui-radius-xl);position:relative;isolation:isolate;background-color:rgba(var(--fanui-glass-tint-rgb),calc(var(--fanui-glass-tint-base) + var(--fanui-glass-tint-k) * var(--fanui-glass-intensity)));background-image:radial-gradient(calc(var(--fanui-glass-specular-size-base) + var(--fanui-glass-specular-size-k) * var(--fanui-glass-intensity)) circle at var(--fanui-glass-mx,30%) var(--fanui-glass-my,0%),rgba(var(--fanui-glass-specular-rgb),calc(var(--fanui-glass-specular-a) * var(--fanui-glass-intensity) * var(--fanui-glass-specular-alpha))),transparent 70%),linear-gradient(180deg,rgba(255,255,255,calc(var(--fanui-glass-sheen-a) * var(--fanui-glass-intensity))) 0%,rgba(255,255,255,0) 46%);background-repeat:no-repeat;background-size:100% 100%;border:1px solid rgba(var(--fanui-glass-border-rgb),calc(var(--fanui-glass-border-a) + var(--fanui-glass-border-k) * var(--fanui-glass-intensity)));border-radius:var(--fanui-glass-radius,12px);color:var(--fanui-color-text);backdrop-filter:blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k,1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));-webkit-backdrop-filter:blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k,1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));box-shadow:0 calc(var(--fanui-glass-shadow-y-k) * var(--fanui-glass-intensity)) calc(var(--fanui-glass-shadow-blur-k) * var(--fanui-glass-intensity)) calc(var(--fanui-glass-shadow-spread-k) * var(--fanui-glass-intensity)) rgba(var(--fanui-glass-shadow-rgb),calc(var(--fanui-glass-shadow-a) + var(--fanui-glass-shadow-k) * var(--fanui-glass-intensity))),inset 0 1px 0 rgba(255,255,255,calc(var(--fanui-glass-inner-hi) * min(1,var(--fanui-glass-intensity))));transition:background-color 300ms cubic-bezier(0.4,0,0.2,1) 0s,box-shadow 300ms cubic-bezier(0.4,0,0.2,1) 0s,border-color 300ms cubic-bezier(0.4,0,0.2,1) 0s,transform 300ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-author::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;padding:var(--fanui-glass-edge-width,calc(1px + 0.5px * var(--fanui-glass-intensity)));background:linear-gradient(var(--fanui-glass-edge-angle,150deg),rgba(255,255,255,calc(var(--fanui-glass-edge-hi-a) * min(1,var(--fanui-glass-intensity)))) 0%,rgba(255,255,255,calc(var(--fanui-glass-edge-lo-a) * var(--fanui-glass-intensity))) 38%,rgba(255,255,255,calc(var(--fanui-glass-edge-lo-a) * var(--fanui-glass-intensity))) 62%,rgba(255,255,255,calc(var(--fanui-glass-edge-hi-a) * min(1,var(--fanui-glass-intensity)))) 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:var(--fanui-glass-edge-alpha,1)}@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.fanui-author{background-color:var(--fanui-glass-fallback-bg);background-image:none}}
+.fanui-author__avatar{flex:0 0 auto;width:56px;height:56px;border-radius:var(--fanui-radius-full);overflow:hidden;background-image:var(--fanui-brand-grad);display:grid;place-items:center;color:#fff;font-weight:var(--fanui-font-weight-semibold)}
+.fanui-author__avatar img{width:100%;height:100%;object-fit:cover}
+.fanui-author__body{display:flex;flex-direction:column;gap:var(--fanui-space-1);min-width:0}
+.fanui-author__name{font-size:var(--fanui-font-size-md);font-weight:var(--fanui-font-weight-semibold);color:var(--fanui-color-text-strong)}
+.fanui-author__role{font-size:var(--fanui-font-size-xs);color:var(--fanui-color-text-subtle)}
+.fanui-author__bio{margin:var(--fanui-space-1) 0 0;font-size:var(--fanui-font-size-sm);line-height:var(--fanui-line-height-relaxed);color:var(--fanui-color-text-muted)}
+.fanui-author__links{display:flex;gap:var(--fanui-space-2);margin-top:var(--fanui-space-2)}
+.fanui-author__links a{font-size:var(--fanui-font-size-xs);color:var(--fanui-primary);text-decoration:none}
+.fanui-author__links a:hover{text-decoration:underline}
+.fanui-share{display:flex;align-items:center;gap:var(--fanui-space-2)}
+.fanui-share__label{font-size:var(--fanui-font-size-xs);color:var(--fanui-color-text-subtle);margin-inline-end:var(--fanui-space-1)}
+.fanui-share__btn{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--fanui-color-border);border-radius:var(--fanui-radius-full);background-color:var(--fanui-color-surface);color:var(--fanui-color-text-muted);cursor:pointer;text-decoration:none;transition:color 150ms cubic-bezier(0.4,0,0.2,1) 0s,border-color 150ms cubic-bezier(0.4,0,0.2,1) 0s,transform 150ms cubic-bezier(0.4,0,0.2,1) 0s,background-color 150ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-share__btn:hover{color:var(--fanui-primary-fg);background-color:var(--fanui-primary);border-color:var(--fanui-primary);transform:translateY(-2px)}
+.fanui-share--sticky{position:sticky;top:calc(var(--fanui-space-10) + 60px);flex-direction:column;align-self:start}
+.fanui-share--sticky .fanui-share__label{writing-mode:vertical-rl;margin:0 0 var(--fanui-space-1)}@media (max-width:991.95px){.fanui-share--sticky{position:static;flex-direction:row}
+.fanui-share--sticky .fanui-share__label{writing-mode:horizontal-tb;margin:0 var(--fanui-space-1) 0 0}}
+.fanui-comment{display:flex;gap:var(--fanui-space-3)}
+.fanui-comment__avatar{flex:0 0 auto;width:36px;height:36px;border-radius:var(--fanui-radius-full);overflow:hidden;display:grid;place-items:center;background-color:var(--fanui-primary-soft-2);color:var(--fanui-primary-ink);font-size:var(--fanui-font-size-sm);font-weight:var(--fanui-font-weight-semibold)}
+.fanui-comment__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--fanui-space-1)}
+.fanui-comment__head{display:flex;align-items:center;gap:var(--fanui-space-2);font-size:var(--fanui-font-size-sm)}
+.fanui-comment__name{font-weight:var(--fanui-font-weight-semibold);color:var(--fanui-color-text-strong)}
+.fanui-comment__time{font-size:var(--fanui-font-size-xs);color:var(--fanui-color-text-subtle)}
+.fanui-comment__text{font-size:var(--fanui-font-size-sm);line-height:var(--fanui-line-height-relaxed);color:var(--fanui-color-text)}
+.fanui-comment__actions{display:flex;gap:var(--fanui-space-3);margin-top:var(--fanui-space-1);font-size:var(--fanui-font-size-xs);color:var(--fanui-color-text-subtle)}
+.fanui-comment__actions button{border:0;background:transparent;padding:0;font:inherit;color:inherit;cursor:pointer}
+.fanui-comment__actions button:hover{color:var(--fanui-primary)}
+.fanui-comment__replies{display:flex;flex-direction:column;gap:var(--fanui-space-4);margin-top:var(--fanui-space-4);padding-inline-start:var(--fanui-space-5);border-inline-start:2px solid var(--fanui-color-border-subtle)}
+.fanui-comment--pinned{padding:var(--fanui-space-4);border-radius:var(--fanui-radius-lg);background-color:var(--fanui-primary-soft)}
+.fanui-comment-list{display:flex;flex-direction:column;gap:var(--fanui-space-6);margin:0;padding:0;list-style:none}
+.fanui-newsletter{display:flex;flex-direction:column;gap:var(--fanui-space-3);padding:var(--fanui-space-6);border-radius:var(--fanui-radius-2xl);position:relative;isolation:isolate;background-color:rgba(var(--fanui-glass-tint-rgb),calc(var(--fanui-glass-tint-base) + var(--fanui-glass-tint-k) * var(--fanui-glass-intensity)));background-image:radial-gradient(calc(var(--fanui-glass-specular-size-base) + var(--fanui-glass-specular-size-k) * var(--fanui-glass-intensity)) circle at var(--fanui-glass-mx,30%) var(--fanui-glass-my,0%),rgba(var(--fanui-glass-specular-rgb),calc(var(--fanui-glass-specular-a) * var(--fanui-glass-intensity) * var(--fanui-glass-specular-alpha))),transparent 70%),linear-gradient(180deg,rgba(255,255,255,calc(var(--fanui-glass-sheen-a) * var(--fanui-glass-intensity))) 0%,rgba(255,255,255,0) 46%);background-repeat:no-repeat;background-size:100% 100%;border:1px solid rgba(var(--fanui-glass-border-rgb),calc(var(--fanui-glass-border-a) + var(--fanui-glass-border-k) * var(--fanui-glass-intensity)));border-radius:var(--fanui-glass-radius,12px);color:var(--fanui-color-text);backdrop-filter:blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k,1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));-webkit-backdrop-filter:blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k,1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));box-shadow:0 calc(var(--fanui-glass-shadow-y-k) * var(--fanui-glass-intensity)) calc(var(--fanui-glass-shadow-blur-k) * var(--fanui-glass-intensity)) calc(var(--fanui-glass-shadow-spread-k) * var(--fanui-glass-intensity)) rgba(var(--fanui-glass-shadow-rgb),calc(var(--fanui-glass-shadow-a) + var(--fanui-glass-shadow-k) * var(--fanui-glass-intensity))),inset 0 1px 0 rgba(255,255,255,calc(var(--fanui-glass-inner-hi) * min(1,var(--fanui-glass-intensity))));transition:background-color 300ms cubic-bezier(0.4,0,0.2,1) 0s,box-shadow 300ms cubic-bezier(0.4,0,0.2,1) 0s,border-color 300ms cubic-bezier(0.4,0,0.2,1) 0s,transform 300ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-newsletter::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;padding:var(--fanui-glass-edge-width,calc(1px + 0.5px * var(--fanui-glass-intensity)));background:linear-gradient(var(--fanui-glass-edge-angle,150deg),rgba(255,255,255,calc(var(--fanui-glass-edge-hi-a) * min(1,var(--fanui-glass-intensity)))) 0%,rgba(255,255,255,calc(var(--fanui-glass-edge-lo-a) * var(--fanui-glass-intensity))) 38%,rgba(255,255,255,calc(var(--fanui-glass-edge-lo-a) * var(--fanui-glass-intensity))) 62%,rgba(255,255,255,calc(var(--fanui-glass-edge-hi-a) * min(1,var(--fanui-glass-intensity)))) 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:var(--fanui-glass-edge-alpha,1)}@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.fanui-newsletter{background-color:var(--fanui-glass-fallback-bg);background-image:none}}
+.fanui-newsletter__title{margin:0;font-size:var(--fanui-font-size-lg);font-weight:var(--fanui-font-weight-semibold);color:var(--fanui-color-text-strong)}
+.fanui-newsletter__desc{margin:0;font-size:var(--fanui-font-size-sm);line-height:var(--fanui-line-height-relaxed);color:var(--fanui-color-text-muted)}
+.fanui-newsletter__form{display:flex;gap:var(--fanui-space-2)}@media (max-width:575.95px){.fanui-newsletter__form{flex-direction:column}}
+.fanui-newsletter__input{display:block;width:100%;min-height:36px;padding:6.5px 14px;font-family:inherit;font-size:14px;line-height:1.5;color:var(--fanui-color-text);background-color:var(--fanui-color-surface);border:1px solid var(--fanui-color-border);border-radius:6px;box-sizing:border-box;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-clip:padding-box;transition:border-color 150ms cubic-bezier(0.4,0,0.2,1) 0s,box-shadow 150ms cubic-bezier(0.4,0,0.2,1) 0s,background-color 150ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-newsletter__input::placeholder{color:var(--fanui-color-text-subtle);opacity:1}
+.fanui-newsletter__input::-webkit-input-placeholder{color:var(--fanui-color-text-subtle);opacity:1}
+.fanui-newsletter__input::-moz-placeholder{color:var(--fanui-color-text-subtle);opacity:1}
+.fanui-newsletter__input:-ms-input-placeholder{color:var(--fanui-color-text-subtle);opacity:1}
+.fanui-newsletter__input:hover:not(:disabled):not(.is-disabled){border-color:var(--fanui-color-border-strong)}
+.fanui-newsletter__input:focus,.fanui-newsletter__input:focus-visible{border-color:var(--fanui-primary);outline:0;box-shadow:0 0 0 var(--fanui-focus-ring-offset,1px) var(--fanui-color-surface,#fff),0 0 0 calc(var(--fanui-focus-ring-offset,1px) + var(--fanui-focus-ring-width,3px)) var(--fanui-focus-ring-color,rgba(14,116,144,0.3))}@media (forced-colors:active){.fanui-newsletter__input:focus,.fanui-newsletter__input:focus-visible{outline:2px solid transparent;outline-offset:2px}}
+.fanui-newsletter__input:disabled,.fanui-newsletter__input.is-disabled{background-color:var(--fanui-color-disabled-bg);color:var(--fanui-color-disabled-text);cursor:not-allowed;resize:none}
+.fanui-newsletter__input[readonly]{background-color:var(--fanui-color-surface-sunken)}
+.fanui-newsletter__input{flex:1 1 auto}
+.fanui-newsletter__note{font-size:var(--fanui-font-size-xs);color:var(--fanui-color-text-subtle)}
+.fanui-newsletter--inline{flex-direction:row;align-items:center;justify-content:space-between;gap:var(--fanui-space-6);flex-wrap:wrap}
+.fanui-newsletter--inline .fanui-newsletter__form{flex:1 1 320px}
+.fanui-related{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--fanui-space-5)}
+.fanui-related__title{grid-column:1/-1;margin:0 0 var(--fanui-space-2);font-size:var(--fanui-font-size-lg);font-weight:var(--fanui-font-weight-semibold);color:var(--fanui-color-text-strong)}
+.fanui-tag-cloud{display:flex;flex-wrap:wrap;gap:var(--fanui-space-2)}
+.fanui-tag-cloud__item{display:inline-flex;align-items:center;gap:var(--fanui-space-1);padding:4px 12px;font-size:var(--fanui-font-size-sm);color:var(--fanui-color-text-muted);background-color:var(--fanui-color-surface);border:1px solid var(--fanui-color-border);border-radius:var(--fanui-radius-full);text-decoration:none;transition:color 150ms cubic-bezier(0.4,0,0.2,1) 0s,border-color 150ms cubic-bezier(0.4,0,0.2,1) 0s,background-color 150ms cubic-bezier(0.4,0,0.2,1) 0s,transform 150ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-tag-cloud__item:hover{color:var(--fanui-primary-ink);background-color:var(--fanui-primary-soft);border-color:var(--fanui-primary-border);transform:translateY(-1px)}
+.fanui-tag-cloud__item--active{color:var(--fanui-primary-fg);background-color:var(--fanui-primary);border-color:var(--fanui-primary)}
+.fanui-tag-cloud__count{font-size:var(--fanui-font-size-xs);opacity:0.7;font-variant-numeric:tabular-nums}

package/dist/modules/fanui-button.css

@@ -0,0 +1,526 @@
+/* fanUI v2.1.0 · module: button（独立产物，自带令牌） */
+.fanui-btn {
+  --fanui-btn-bg: var(--fanui-primary);
+  --fanui-btn-fg: var(--fanui-primary-fg, #fff);
+  --fanui-btn-border: var(--fanui-primary);
+  --fanui-btn-hover-bg: var(--fanui-primary-hover);
+  --fanui-btn-hover-fg: var(--fanui-primary-fg, #fff);
+  --fanui-btn-hover-border: var(--fanui-primary-hover);
+  --fanui-btn-active-bg: var(--fanui-primary-active);
+  --fanui-btn-active-fg: var(--fanui-primary-fg, #fff);
+  --fanui-btn-active-border: var(--fanui-primary-active);
+  --fanui-btn-ring: var(--fanui-primary-ring);
+  --fanui-btn-height: var(--fanui-control-h, 36px);
+  --fanui-btn-padding-x: var(--fanui-control-px, 14px);
+  --fanui-btn-font-size: var(--fanui-font-size-base);
+  --fanui-btn-radius: var(--fanui-radius-base);
+  --fanui-btn-gap: 6px;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--fanui-btn-gap);
+  min-height: var(--fanui-btn-height);
+  padding: 0 var(--fanui-btn-padding-x);
+  font-family: inherit;
+  font-size: var(--fanui-btn-font-size);
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  vertical-align: middle;
+  text-decoration: none;
+  text-align: center;
+  color: var(--fanui-btn-fg);
+  background-color: var(--fanui-btn-bg);
+  border: 1px solid var(--fanui-btn-border);
+  border-radius: var(--fanui-btn-radius);
+  cursor: pointer;
+  user-select: none;
+  box-sizing: border-box;
+  overflow: hidden;
+  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s, background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s, border-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s, box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s, transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s, opacity 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background-clip: padding-box;
+}
+.fanui-btn:hover:not(:disabled):not(.is-disabled) {
+  color: var(--fanui-btn-hover-fg);
+  background-color: var(--fanui-btn-hover-bg);
+  border-color: var(--fanui-btn-hover-border);
+  text-decoration: none;
+}
+.fanui-btn:active:not(:disabled):not(.is-disabled), .fanui-btn.is-active {
+  color: var(--fanui-btn-active-fg);
+  background-color: var(--fanui-btn-active-bg);
+  border-color: var(--fanui-btn-active-border);
+}
+.fanui-btn:focus-visible {
+  outline: 0;
+  box-shadow: 0 0 0 var(--fanui-btn-ring);
+}
+.fanui-btn > svg,
+.fanui-btn .fanui-btn__icon {
+  flex: 0 0 auto;
+  width: 1em;
+  height: 1em;
+  font-size: 1.15em;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+.fanui-btn:disabled, .fanui-btn.is-disabled, .fanui-btn[aria-disabled=true] {
+  opacity: 0.55;
+  cursor: not-allowed;
+  pointer-events: none;
+  box-shadow: none;
+}
+.fanui-btn[aria-busy=true] {
+  pointer-events: none;
+}
+
+.fanui-btn--primary {
+  --fanui-btn-bg: var(--fanui-primary, #0e7490);
+  --fanui-btn-fg: var(--fanui-primary-fg, #ffffff);
+  --fanui-btn-border: var(--fanui-primary, #0e7490);
+  --fanui-btn-hover-bg: var(--fanui-primary-hover, rgb(4.9411764706%, 40.9411764706%, 50.8235294118%));
+  --fanui-btn-hover-fg: var(--fanui-primary-fg, #ffffff);
+  --fanui-btn-hover-border: var(--fanui-primary-hover, rgb(4.9411764706%, 40.9411764706%, 50.8235294118%));
+  --fanui-btn-active-bg: var(--fanui-primary-active, rgb(4.5019607843%, 37.3019607843%, 46.3058823529%));
+  --fanui-btn-active-fg: var(--fanui-primary-fg, #ffffff);
+  --fanui-btn-active-border: var(--fanui-primary-active, rgb(4.5019607843%, 37.3019607843%, 46.3058823529%));
+  --fanui-btn-ring: var(--fanui-primary-ring, rgba(14, 116, 144, 0.3));
+}
+
+.fanui-btn--accent {
+  --fanui-btn-bg: var(--fanui-accent, #7c3aed);
+  --fanui-btn-fg: var(--fanui-accent-fg, #ffffff);
+  --fanui-btn-border: var(--fanui-accent, #7c3aed);
+  --fanui-btn-hover-bg: var(--fanui-accent-hover, rgb(43.7647058824%, 20.4705882353%, 83.6470588235%));
+  --fanui-btn-hover-fg: var(--fanui-accent-fg, #ffffff);
+  --fanui-btn-hover-border: var(--fanui-accent-hover, rgb(43.7647058824%, 20.4705882353%, 83.6470588235%));
+  --fanui-btn-active-bg: var(--fanui-accent-active, rgb(39.8745098039%, 18.6509803922%, 76.2117647059%));
+  --fanui-btn-active-fg: var(--fanui-accent-fg, #ffffff);
+  --fanui-btn-active-border: var(--fanui-accent-active, rgb(39.8745098039%, 18.6509803922%, 76.2117647059%));
+  --fanui-btn-ring: var(--fanui-accent-ring, rgba(124, 58, 237, 0.3));
+}
+
+.fanui-btn--success {
+  --fanui-btn-bg: var(--fanui-success, #047857);
+  --fanui-btn-fg: var(--fanui-success-fg, #ffffff);
+  --fanui-btn-border: var(--fanui-success, #047857);
+  --fanui-btn-hover-bg: var(--fanui-success-hover, rgb(1.4117647059%, 42.3529411765%, 30.7058823529%));
+  --fanui-btn-hover-fg: var(--fanui-success-fg, #ffffff);
+  --fanui-btn-hover-border: var(--fanui-success-hover, rgb(1.4117647059%, 42.3529411765%, 30.7058823529%));
+  --fanui-btn-active-bg: var(--fanui-success-active, rgb(1.2862745098%, 38.5882352941%, 27.9764705882%));
+  --fanui-btn-active-fg: var(--fanui-success-fg, #ffffff);
+  --fanui-btn-active-border: var(--fanui-success-active, rgb(1.2862745098%, 38.5882352941%, 27.9764705882%));
+  --fanui-btn-ring: var(--fanui-success-ring, rgba(4, 120, 87, 0.3));
+}
+
+.fanui-btn--warning {
+  --fanui-btn-bg: var(--fanui-warning, #b45309);
+  --fanui-btn-fg: var(--fanui-warning-fg, #ffffff);
+  --fanui-btn-border: var(--fanui-warning, #b45309);
+  --fanui-btn-hover-bg: var(--fanui-warning-hover, rgb(63.5294117647%, 29.2941176471%, 3.1764705882%));
+  --fanui-btn-hover-fg: var(--fanui-warning-fg, #ffffff);
+  --fanui-btn-hover-border: var(--fanui-warning-hover, rgb(63.5294117647%, 29.2941176471%, 3.1764705882%));
+  --fanui-btn-active-bg: var(--fanui-warning-active, rgb(57.8823529412%, 26.6901960784%, 2.8941176471%));
+  --fanui-btn-active-fg: var(--fanui-warning-fg, #ffffff);
+  --fanui-btn-active-border: var(--fanui-warning-active, rgb(57.8823529412%, 26.6901960784%, 2.8941176471%));
+  --fanui-btn-ring: var(--fanui-warning-ring, rgba(180, 83, 9, 0.3));
+}
+
+.fanui-btn--danger {
+  --fanui-btn-bg: var(--fanui-danger, #b91c1c);
+  --fanui-btn-fg: var(--fanui-danger-fg, #ffffff);
+  --fanui-btn-border: var(--fanui-danger, #b91c1c);
+  --fanui-btn-hover-bg: var(--fanui-danger-hover, rgb(65.2941176471%, 9.8823529412%, 9.8823529412%));
+  --fanui-btn-hover-fg: var(--fanui-danger-fg, #ffffff);
+  --fanui-btn-hover-border: var(--fanui-danger-hover, rgb(65.2941176471%, 9.8823529412%, 9.8823529412%));
+  --fanui-btn-active-bg: var(--fanui-danger-active, rgb(59.4901960784%, 9.0039215686%, 9.0039215686%));
+  --fanui-btn-active-fg: var(--fanui-danger-fg, #ffffff);
+  --fanui-btn-active-border: var(--fanui-danger-active, rgb(59.4901960784%, 9.0039215686%, 9.0039215686%));
+  --fanui-btn-ring: var(--fanui-danger-ring, rgba(185, 28, 28, 0.3));
+}
+
+.fanui-btn--info {
+  --fanui-btn-bg: var(--fanui-info, #0369a1);
+  --fanui-btn-fg: var(--fanui-info-fg, #ffffff);
+  --fanui-btn-border: var(--fanui-info, #0369a1);
+  --fanui-btn-hover-bg: var(--fanui-info-hover, rgb(1.0588235294%, 37.0588235294%, 56.8235294118%));
+  --fanui-btn-hover-fg: var(--fanui-info-fg, #ffffff);
+  --fanui-btn-hover-border: var(--fanui-info-hover, rgb(1.0588235294%, 37.0588235294%, 56.8235294118%));
+  --fanui-btn-active-bg: var(--fanui-info-active, rgb(0.9647058824%, 33.7647058824%, 51.7725490196%));
+  --fanui-btn-active-fg: var(--fanui-info-fg, #ffffff);
+  --fanui-btn-active-border: var(--fanui-info-active, rgb(0.9647058824%, 33.7647058824%, 51.7725490196%));
+  --fanui-btn-ring: var(--fanui-info-ring, rgba(3, 105, 161, 0.3));
+}
+
+.fanui-btn--neutral,
+.fanui-btn--default {
+  --fanui-btn-bg: var(--fanui-color-surface);
+  --fanui-btn-fg: var(--fanui-color-text);
+  --fanui-btn-border: var(--fanui-color-border-strong);
+  --fanui-btn-hover-bg: var(--fanui-color-hover);
+  --fanui-btn-hover-fg: var(--fanui-color-text-strong);
+  --fanui-btn-hover-border: var(--fanui-color-border-strong);
+  --fanui-btn-active-bg: var(--fanui-color-active);
+  --fanui-btn-active-fg: var(--fanui-color-text-strong);
+  --fanui-btn-active-border: var(--fanui-color-border-strong);
+  --fanui-btn-ring: rgba(14, 116, 144, 0.28);
+}
+
+.fanui-btn--white {
+  --fanui-btn-bg: #ffffff;
+  --fanui-btn-fg: var(--fanui-color-text-strong);
+  --fanui-btn-border: #ffffff;
+  --fanui-btn-hover-bg: rgb(90%, 90%, 90%);
+  --fanui-btn-hover-fg: var(--fanui-color-text-strong);
+  --fanui-btn-hover-border: rgb(90%, 90%, 90%);
+  --fanui-btn-active-bg: rgb(82%, 82%, 82%);
+  --fanui-btn-active-fg: var(--fanui-color-text-strong);
+  --fanui-btn-active-border: rgb(82%, 82%, 82%);
+  --fanui-btn-ring: rgba(255, 255, 255, 0.3);
+}
+
+.fanui-btn--outline.fanui-btn--primary {
+  --fanui-btn-bg: transparent;
+  --fanui-btn-fg: var(--fanui-primary, #0e7490);
+  --fanui-btn-border: var(--fanui-primary, #0e7490);
+  --fanui-btn-hover-bg: var(--fanui-primary, #0e7490);
+  --fanui-btn-hover-fg: var(--fanui-primary-fg, #ffffff);
+  --fanui-btn-hover-border: var(--fanui-primary, #0e7490);
+  --fanui-btn-active-bg: var(--fanui-primary-active, rgb(4.5019607843%, 37.3019607843%, 46.3058823529%));
+  --fanui-btn-active-fg: var(--fanui-primary-fg, #ffffff);
+  --fanui-btn-active-border: var(--fanui-primary-active, rgb(4.5019607843%, 37.3019607843%, 46.3058823529%));
+  --fanui-btn-ring: var(--fanui-primary-ring, rgba(14, 116, 144, 0.3));
+}
+
+.fanui-btn--outline.fanui-btn--accent {
+  --fanui-btn-bg: transparent;
+  --fanui-btn-fg: var(--fanui-accent, #7c3aed);
+  --fanui-btn-border: var(--fanui-accent, #7c3aed);
+  --fanui-btn-hover-bg: var(--fanui-accent, #7c3aed);
+  --fanui-btn-hover-fg: var(--fanui-accent-fg, #ffffff);
+  --fanui-btn-hover-border: var(--fanui-accent, #7c3aed);
+  --fanui-btn-active-bg: var(--fanui-accent-active, rgb(39.8745098039%, 18.6509803922%, 76.2117647059%));
+  --fanui-btn-active-fg: var(--fanui-accent-fg, #ffffff);
+  --fanui-btn-active-border: var(--fanui-accent-active, rgb(39.8745098039%, 18.6509803922%, 76.2117647059%));
+  --fanui-btn-ring: var(--fanui-accent-ring, rgba(124, 58, 237, 0.3));
+}
+
+.fanui-btn--outline.fanui-btn--success {
+  --fanui-btn-bg: transparent;
+  --fanui-btn-fg: var(--fanui-success, #047857);
+  --fanui-btn-border: var(--fanui-success, #047857);
+  --fanui-btn-hover-bg: var(--fanui-success, #047857);
+  --fanui-btn-hover-fg: var(--fanui-success-fg, #ffffff);
+  --fanui-btn-hover-border: var(--fanui-success, #047857);
+  --fanui-btn-active-bg: var(--fanui-success-active, rgb(1.2862745098%, 38.5882352941%, 27.9764705882%));
+  --fanui-btn-active-fg: var(--fanui-success-fg, #ffffff);
+  --fanui-btn-active-border: var(--fanui-success-active, rgb(1.2862745098%, 38.5882352941%, 27.9764705882%));
+  --fanui-btn-ring: var(--fanui-success-ring, rgba(4, 120, 87, 0.3));
+}
+
+.fanui-btn--outline.fanui-btn--warning {
+  --fanui-btn-bg: transparent;
+  --fanui-btn-fg: var(--fanui-warning, #b45309);
+  --fanui-btn-border: var(--fanui-warning, #b45309);
+  --fanui-btn-hover-bg: var(--fanui-warning, #b45309);
+  --fanui-btn-hover-fg: var(--fanui-warning-fg, #ffffff);
+  --fanui-btn-hover-border: var(--fanui-warning, #b45309);
+  --fanui-btn-active-bg: var(--fanui-warning-active, rgb(57.8823529412%, 26.6901960784%, 2.8941176471%));
+  --fanui-btn-active-fg: var(--fanui-warning-fg, #ffffff);
+  --fanui-btn-active-border: var(--fanui-warning-active, rgb(57.8823529412%, 26.6901960784%, 2.8941176471%));
+  --fanui-btn-ring: var(--fanui-warning-ring, rgba(180, 83, 9, 0.3));
+}
+
+.fanui-btn--outline.fanui-btn--danger {
+  --fanui-btn-bg: transparent;
+  --fanui-btn-fg: var(--fanui-danger, #b91c1c);
+  --fanui-btn-border: var(--fanui-danger, #b91c1c);
+  --fanui-btn-hover-bg: var(--fanui-danger, #b91c1c);
+  --fanui-btn-hover-fg: var(--fanui-danger-fg, #ffffff);
+  --fanui-btn-hover-border: var(--fanui-danger, #b91c1c);
+  --fanui-btn-active-bg: var(--fanui-danger-active, rgb(59.4901960784%, 9.0039215686%, 9.0039215686%));
+  --fanui-btn-active-fg: var(--fanui-danger-fg, #ffffff);
+  --fanui-btn-active-border: var(--fanui-danger-active, rgb(59.4901960784%, 9.0039215686%, 9.0039215686%));
+  --fanui-btn-ring: var(--fanui-danger-ring, rgba(185, 28, 28, 0.3));
+}
+
+.fanui-btn--outline.fanui-btn--info {
+  --fanui-btn-bg: transparent;
+  --fanui-btn-fg: var(--fanui-info, #0369a1);
+  --fanui-btn-border: var(--fanui-info, #0369a1);
+  --fanui-btn-hover-bg: var(--fanui-info, #0369a1);
+  --fanui-btn-hover-fg: var(--fanui-info-fg, #ffffff);
+  --fanui-btn-hover-border: var(--fanui-info, #0369a1);
+  --fanui-btn-active-bg: var(--fanui-info-active, rgb(0.9647058824%, 33.7647058824%, 51.7725490196%));
+  --fanui-btn-active-fg: var(--fanui-info-fg, #ffffff);
+  --fanui-btn-active-border: var(--fanui-info-active, rgb(0.9647058824%, 33.7647058824%, 51.7725490196%));
+  --fanui-btn-ring: var(--fanui-info-ring, rgba(3, 105, 161, 0.3));
+}
+
+.fanui-btn--ghost,
+.fanui-btn--text {
+  --fanui-btn-bg: transparent;
+  --fanui-btn-fg: var(--fanui-color-text-muted);
+  --fanui-btn-border: transparent;
+  --fanui-btn-hover-bg: var(--fanui-color-hover);
+  --fanui-btn-hover-fg: var(--fanui-color-text);
+  --fanui-btn-hover-border: transparent;
+  --fanui-btn-active-bg: var(--fanui-color-active);
+  --fanui-btn-active-fg: var(--fanui-color-text-strong);
+  --fanui-btn-active-border: transparent;
+  --fanui-btn-ring: var(--fanui-primary-ring);
+}
+
+.fanui-btn--ghost.fanui-btn--primary,
+.fanui-btn--text.fanui-btn--primary {
+  --fanui-btn-bg: transparent;
+  --fanui-btn-fg: var(--fanui-primary, #0e7490);
+  --fanui-btn-border: transparent;
+  --fanui-btn-hover-bg: var(--fanui-primary-soft, rgba(14, 116, 144, 0.1));
+  --fanui-btn-hover-fg: var(--fanui-primary-hover, rgb(5.0509803922%, 41.8509803922%, 51.9529411765%));
+  --fanui-btn-hover-border: transparent;
+  --fanui-btn-active-bg: rgba(14, 116, 144, 0.18);
+  --fanui-btn-active-fg: var(--fanui-primary-active, rgb(4.6117647059%, 38.2117647059%, 47.4352941176%));
+  --fanui-btn-active-border: transparent;
+  --fanui-btn-ring: var(--fanui-primary-ring, rgba(14, 116, 144, 0.3));
+}
+
+.fanui-btn--ghost.fanui-btn--accent,
+.fanui-btn--text.fanui-btn--accent {
+  --fanui-btn-bg: transparent;
+  --fanui-btn-fg: var(--fanui-accent, #7c3aed);
+  --fanui-btn-border: transparent;
+  --fanui-btn-hover-bg: var(--fanui-accent-soft, rgba(124, 58, 237, 0.1));
+  --fanui-btn-hover-fg: var(--fanui-accent-hover, rgb(44.737254902%, 20.9254901961%, 85.5058823529%));
+  --fanui-btn-hover-border: transparent;
+  --fanui-btn-active-bg: rgba(124, 58, 237, 0.18);
+  --fanui-btn-active-fg: var(--fanui-accent-active, rgb(40.8470588235%, 19.1058823529%, 78.0705882353%));
+  --fanui-btn-active-border: transparent;
+  --fanui-btn-ring: var(--fanui-accent-ring, rgba(124, 58, 237, 0.3));
+}
+
+.fanui-btn--ghost.fanui-btn--success,
+.fanui-btn--text.fanui-btn--success {
+  --fanui-btn-bg: transparent;
+  --fanui-btn-fg: var(--fanui-success, #047857);
+  --fanui-btn-border: transparent;
+  --fanui-btn-hover-bg: var(--fanui-success-soft, rgba(4, 120, 87, 0.1));
+  --fanui-btn-hover-fg: var(--fanui-success-hover, rgb(1.4431372549%, 43.2941176471%, 31.3882352941%));
+  --fanui-btn-hover-border: transparent;
+  --fanui-btn-active-bg: rgba(4, 120, 87, 0.18);
+  --fanui-btn-active-fg: var(--fanui-success-active, rgb(1.3176470588%, 39.5294117647%, 28.6588235294%));
+  --fanui-btn-active-border: transparent;
+  --fanui-btn-ring: var(--fanui-success-ring, rgba(4, 120, 87, 0.3));
+}
+
+.fanui-btn--ghost.fanui-btn--warning,
+.fanui-btn--text.fanui-btn--warning {
+  --fanui-btn-bg: transparent;
+  --fanui-btn-fg: var(--fanui-warning, #b45309);
+  --fanui-btn-border: transparent;
+  --fanui-btn-hover-bg: var(--fanui-warning-soft, rgba(180, 83, 9, 0.1));
+  --fanui-btn-hover-fg: var(--fanui-warning-hover, rgb(64.9411764706%, 29.9450980392%, 3.2470588235%));
+  --fanui-btn-hover-border: transparent;
+  --fanui-btn-active-bg: rgba(180, 83, 9, 0.18);
+  --fanui-btn-active-fg: var(--fanui-warning-active, rgb(59.2941176471%, 27.3411764706%, 2.9647058824%));
+  --fanui-btn-active-border: transparent;
+  --fanui-btn-ring: var(--fanui-warning-ring, rgba(180, 83, 9, 0.3));
+}
+
+.fanui-btn--ghost.fanui-btn--danger,
+.fanui-btn--text.fanui-btn--danger {
+  --fanui-btn-bg: transparent;
+  --fanui-btn-fg: var(--fanui-danger, #b91c1c);
+  --fanui-btn-border: transparent;
+  --fanui-btn-hover-bg: var(--fanui-danger-soft, rgba(185, 28, 28, 0.1));
+  --fanui-btn-hover-fg: var(--fanui-danger-hover, rgb(66.7450980392%, 10.1019607843%, 10.1019607843%));
+  --fanui-btn-hover-border: transparent;
+  --fanui-btn-active-bg: rgba(185, 28, 28, 0.18);
+  --fanui-btn-active-fg: var(--fanui-danger-active, rgb(60.9411764706%, 9.2235294118%, 9.2235294118%));
+  --fanui-btn-active-border: transparent;
+  --fanui-btn-ring: var(--fanui-danger-ring, rgba(185, 28, 28, 0.3));
+}
+
+.fanui-btn--ghost.fanui-btn--info,
+.fanui-btn--text.fanui-btn--info {
+  --fanui-btn-bg: transparent;
+  --fanui-btn-fg: var(--fanui-info, #0369a1);
+  --fanui-btn-border: transparent;
+  --fanui-btn-hover-bg: var(--fanui-info-soft, rgba(3, 105, 161, 0.1));
+  --fanui-btn-hover-fg: var(--fanui-info-hover, rgb(1.0823529412%, 37.8823529412%, 58.0862745098%));
+  --fanui-btn-hover-border: transparent;
+  --fanui-btn-active-bg: rgba(3, 105, 161, 0.18);
+  --fanui-btn-active-fg: var(--fanui-info-active, rgb(0.9882352941%, 34.5882352941%, 53.0352941176%));
+  --fanui-btn-active-border: transparent;
+  --fanui-btn-ring: var(--fanui-info-ring, rgba(3, 105, 161, 0.3));
+}
+
+.fanui-btn--link {
+  --fanui-btn-bg: transparent;
+  --fanui-btn-fg: var(--fanui-primary);
+  --fanui-btn-border: transparent;
+  --fanui-btn-hover-bg: transparent;
+  --fanui-btn-hover-fg: var(--fanui-primary-hover);
+  --fanui-btn-hover-border: transparent;
+  --fanui-btn-active-bg: transparent;
+  --fanui-btn-active-fg: var(--fanui-primary-active);
+  --fanui-btn-active-border: transparent;
+  padding: 0;
+  min-height: auto;
+  text-decoration: none;
+}
+.fanui-btn--link:hover {
+  text-decoration: underline;
+}
+
+.fanui-btn--xs {
+  --fanui-btn-height: 24px;
+  --fanui-btn-padding-x: 8px;
+  --fanui-btn-font-size: var(--fanui-font-size-xs);
+  --fanui-btn-radius: var(--fanui-radius-sm);
+  --fanui-btn-gap: 4px;
+}
+
+.fanui-btn--sm {
+  --fanui-btn-height: 28px;
+  --fanui-btn-padding-x: 10px;
+  --fanui-btn-font-size: var(--fanui-font-size-sm);
+  --fanui-btn-gap: 4px;
+}
+
+.fanui-btn--md {
+  --fanui-btn-height: 32px;
+  --fanui-btn-padding-x: 12px;
+  --fanui-btn-font-size: var(--fanui-font-size-base);
+}
+
+.fanui-btn--base, .fanui-btn--lg {
+  --fanui-btn-height: 40px;
+  --fanui-btn-padding-x: 16px;
+  --fanui-btn-font-size: var(--fanui-font-size-md);
+}
+
+.fanui-btn--xl {
+  --fanui-btn-height: 48px;
+  --fanui-btn-padding-x: 22px;
+  --fanui-btn-font-size: var(--fanui-font-size-lg);
+  --fanui-btn-radius: var(--fanui-radius-md);
+}
+
+.fanui-btn--block {
+  display: flex;
+  width: 100%;
+}
+
+.fanui-btn--square {
+  --fanui-btn-padding-x: 0;
+  width: var(--fanui-btn-height);
+  padding: 0;
+  flex: 0 0 auto;
+}
+
+.fanui-btn--circle {
+  --fanui-btn-padding-x: 0;
+  width: var(--fanui-btn-height);
+  padding: 0;
+  border-radius: 9999px;
+  flex: 0 0 auto;
+}
+
+.fanui-btn--pill {
+  --fanui-btn-radius: 9999px;
+}
+
+.fanui-btn--sharp {
+  --fanui-btn-radius: 0;
+}
+
+.fanui-btn--icon-start {
+  flex-direction: row-reverse;
+}
+
+.fanui-btn--icon-end {
+  flex-direction: row;
+}
+
+.fanui-btn--loading,
+.fanui-btn.is-loading {
+  pointer-events: none;
+  color: transparent !important;
+}
+.fanui-btn--loading::after,
+.fanui-btn.is-loading::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 1em;
+  height: 1em;
+  margin: -0.5em 0 0 -0.5em;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  border-radius: 50%;
+  color: var(--fanui-btn-fg);
+  animation: fanui-spin 700ms linear infinite;
+}
+.fanui-btn--loading > *,
+.fanui-btn.is-loading > * {
+  visibility: hidden;
+}
+
+.fanui-btn-group {
+  display: inline-flex;
+  vertical-align: middle;
+  border-radius: var(--fanui-radius-base);
+  overflow: hidden;
+}
+.fanui-btn-group > .fanui-btn {
+  border-radius: 0;
+  margin-inline-start: -1px;
+  flex: 1 1 auto;
+}
+.fanui-btn-group > .fanui-btn:first-child {
+  margin-inline-start: 0;
+  border-start-start-radius: var(--fanui-radius-base);
+  border-end-start-radius: var(--fanui-radius-base);
+}
+.fanui-btn-group > .fanui-btn:last-child {
+  border-start-end-radius: var(--fanui-radius-base);
+  border-end-end-radius: var(--fanui-radius-base);
+}
+.fanui-btn-group > .fanui-btn:hover,
+.fanui-btn-group > .fanui-btn:focus-visible,
+.fanui-btn-group > .fanui-btn.is-active {
+  z-index: 1;
+}
+.fanui-btn-group--pill {
+  border-radius: 9999px;
+}
+.fanui-btn-group--vertical {
+  flex-direction: column;
+}
+.fanui-btn-group--vertical > .fanui-btn {
+  margin-inline-start: 0;
+  margin-top: -1px;
+  width: 100%;
+}
+.fanui-btn-group--vertical > .fanui-btn:first-child {
+  border-radius: var(--fanui-radius-base) var(--fanui-radius-base) 0 0;
+}
+.fanui-btn-group--vertical > .fanui-btn:last-child {
+  border-radius: 0 0 var(--fanui-radius-base) var(--fanui-radius-base);
+}
+
+.fanui-btn-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--fanui-space-3);
+}