@zhang_jifan/fanui 2.1.0

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

@@ -0,0 +1,160 @@
+.fanui-kpi{display:flex;flex-direction:column;gap:var(--fanui-space-3);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-kpi::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-kpi{background-color:var(--fanui-glass-fallback-bg);background-image:none}}
+.fanui-kpi{transition:transform 200ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-kpi:hover{transform:translateY(-2px)}
+.fanui-kpi__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--fanui-space-3)}
+.fanui-kpi__label{font-size:var(--fanui-font-size-sm);color:var(--fanui-color-text-muted)}
+.fanui-kpi__icon{display:grid;place-items:center;width:34px;height:34px;flex:0 0 auto;border-radius:var(--fanui-radius-md);color:var(--fanui-primary);background-color:var(--fanui-primary-soft);font-size:var(--fanui-font-size-md)}
+.fanui-kpi__value{display:flex;align-items:baseline;gap:var(--fanui-space-2);font-size:clamp(1.5rem,2.4vw,2rem);font-weight:var(--fanui-font-weight-bold);line-height:1.15;letter-spacing:var(--fanui-tracking-tight);font-variant-numeric:tabular-nums;color:var(--fanui-color-text-strong)}
+.fanui-kpi__value small{font-size:var(--fanui-font-size-sm);font-weight:var(--fanui-font-weight-normal);color:var(--fanui-color-text-subtle)}
+.fanui-kpi__delta{display:inline-flex;align-items:center;gap:3px;padding:1px 7px;font-size:var(--fanui-font-size-xs);font-weight:var(--fanui-font-weight-semibold);border-radius:var(--fanui-radius-full);font-variant-numeric:tabular-nums}
+.fanui-kpi__delta--up{color:var(--fanui-danger-ink);background-color:var(--fanui-danger-soft)}
+.fanui-kpi__delta--down{color:var(--fanui-success-ink);background-color:var(--fanui-success-soft)}
+.fanui-kpi__delta--flat{color:var(--fanui-color-text-muted);background-color:var(--fanui-color-surface-sunken)}
+.fanui-kpi__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--fanui-space-3);font-size:var(--fanui-font-size-xs);color:var(--fanui-color-text-subtle)}
+.fanui-kpi__spark{display:flex;align-items:flex-end;gap:2px;height:28px;margin-top:var(--fanui-space-1)}
+.fanui-kpi__spark-bar{flex:1 1 0;min-width:2px;height:var(--fanui-spark-h,40%);border-radius:2px;background-image:linear-gradient(to top,var(--fanui-primary),var(--fanui-primary-vivid));opacity:0.85;transition:height 300ms cubic-bezier(0.34,1.56,0.64,1) 0s,opacity 300ms cubic-bezier(0.34,1.56,0.64,1) 0s}
+.fanui-kpi__spark-bar:last-child{opacity:1}
+.fanui-kpi:hover .fanui-kpi__spark-bar{opacity:1}
+.fanui-kpi--accent .fanui-kpi__spark-bar{background-image:linear-gradient(to top,var(--fanui-accent),var(--fanui-accent-vivid))}
+.fanui-kpi--accent .fanui-kpi__icon{color:var(--fanui-accent);background-color:var(--fanui-accent-soft)}
+.fanui-kpi--success .fanui-kpi__spark-bar{background-image:linear-gradient(to top,var(--fanui-success),var(--fanui-success-vivid))}
+.fanui-kpi--success .fanui-kpi__icon{color:var(--fanui-success);background-color:var(--fanui-success-soft)}
+.fanui-kpi--warning .fanui-kpi__spark-bar{background-image:linear-gradient(to top,var(--fanui-warning),var(--fanui-warning-vivid))}
+.fanui-kpi--warning .fanui-kpi__icon{color:var(--fanui-warning);background-color:var(--fanui-warning-soft)}
+.fanui-kpi--danger .fanui-kpi__spark-bar{background-image:linear-gradient(to top,var(--fanui-danger),var(--fanui-danger-vivid))}
+.fanui-kpi--danger .fanui-kpi__icon{color:var(--fanui-danger);background-color:var(--fanui-danger-soft)}
+.fanui-kpi--compact{padding:var(--fanui-space-4);gap:var(--fanui-space-2)}
+.fanui-kpi--compact .fanui-kpi__value{font-size:var(--fanui-font-size-xl)}
+.fanui-bars{--fanui-bars-height:180px;display:flex;align-items:flex-end;gap:var(--fanui-bars-gap,6px);height:var(--fanui-bars-height);padding-top:var(--fanui-space-4)}
+.fanui-bars__group{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:var(--fanui-space-2);height:100%}
+.fanui-bars__stack{display:flex;align-items:flex-end;justify-content:center;gap:2px;width:100%;flex:1 1 auto;min-height:0}
+.fanui-bars__bar{position:relative;width:100%;max-width:var(--fanui-bars-width,28px);height:var(--fanui-bar-h,50%);border-radius:var(--fanui-radius-sm) var(--fanui-radius-sm) 2px 2px;background-image:linear-gradient(to top,var(--fanui-bar-c1,var(--fanui-primary)),var(--fanui-bar-c2,var(--fanui-primary-vivid)));transform-origin:bottom center;animation:fanui-bar-grow 520ms cubic-bezier(0,0,0.2,1) both;transition:opacity 150ms cubic-bezier(0.4,0,0.2,1) 0s,filter 150ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-bars__bar:hover{filter:brightness(1.08)}
+.fanui-bars__group:hover .fanui-bars__bar{opacity:0.72}
+.fanui-bars__group:hover .fanui-bars__bar:hover,.fanui-bars__bar:hover{opacity:1}
+.fanui-bars__label{font-size:var(--fanui-font-size-xs);color:var(--fanui-color-text-subtle);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
+.fanui-bars__tip{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%) translateY(4px);padding:3px 8px;font-size:var(--fanui-font-size-xs);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--fanui-color-text-inverse);background-color:var(--fanui-color-text-strong);border-radius:var(--fanui-radius-sm);opacity:0;pointer-events:none;transition:opacity 150ms cubic-bezier(0.4,0,0.2,1) 0s,transform 150ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-bars__bar:hover .fanui-bars__tip{opacity:1;transform:translateX(-50%) translateY(0)}
+.fanui-bars__grid{position:relative}
+.fanui-bars__grid::before{content:"";position:absolute;inset:var(--fanui-space-4) 0 0;pointer-events:none;background-image:repeating-linear-gradient(to top,var(--fanui-color-border-subtle) 0 1px,transparent 1px 25%);opacity:0.7}
+.fanui-bars--horizontal{flex-direction:column;align-items:stretch;height:auto}
+.fanui-bars--horizontal .fanui-bars__group{flex-direction:row;align-items:center;height:auto;gap:var(--fanui-space-3)}
+.fanui-bars--horizontal .fanui-bars__stack{align-items:center;height:22px}
+.fanui-bars--horizontal .fanui-bars__bar{height:12px !important;max-width:none;width:var(--fanui-bar-h,50%);border-radius:var(--fanui-radius-full)}
+.fanui-bars--horizontal .fanui-bars__label{min-width:84px;text-align:start}@keyframes fanui-bar-grow{from{transform:scaleY(0);opacity:0}
+to{transform:scaleY(1);opacity:1}}
+.fanui-donut{--fanui-donut-value:68%;--fanui-donut-size:148px;--fanui-donut-thickness:14px;--fanui-donut-c1:var(--fanui-primary);--fanui-donut-c2:var(--fanui-primary-vivid);position:relative;display:grid;place-items:center;width:var(--fanui-donut-size);height:var(--fanui-donut-size);border-radius:var(--fanui-radius-full);background-image:conic-gradient(from -90deg,var(--fanui-donut-c1) 0%,var(--fanui-donut-c2) var(--fanui-donut-value),var(--fanui-color-border) var(--fanui-donut-value),var(--fanui-color-border) 100%)}
+.fanui-donut::before{content:"";position:absolute;inset:var(--fanui-donut-thickness);border-radius:var(--fanui-radius-full);background-color:var(--fanui-color-surface)}
+.fanui-donut__center{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
+.fanui-donut__value{font-size:var(--fanui-font-size-2xl);font-weight:var(--fanui-font-weight-bold);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:var(--fanui-tracking-tight);color:var(--fanui-color-text-strong)}
+.fanui-donut__label{font-size:var(--fanui-font-size-xs);color:var(--fanui-color-text-subtle)}
+.fanui-donut--sm{--fanui-donut-size:96px;--fanui-donut-thickness:10px}
+.fanui-donut--lg{--fanui-donut-size:200px;--fanui-donut-thickness:18px}
+.fanui-donut--accent{--fanui-donut-c1:var(--fanui-accent);--fanui-donut-c2:var(--fanui-accent-vivid)}
+.fanui-donut--success{--fanui-donut-c1:var(--fanui-success);--fanui-donut-c2:var(--fanui-success-vivid)}
+.fanui-donut--warning{--fanui-donut-c1:var(--fanui-warning);--fanui-donut-c2:var(--fanui-warning-vivid)}
+.fanui-donut--danger{--fanui-donut-c1:var(--fanui-danger);--fanui-donut-c2:var(--fanui-danger-vivid)}
+.fanui-legend{display:flex;flex-wrap:wrap;gap:var(--fanui-space-3) var(--fanui-space-4);margin:0;padding:0;list-style:none;font-size:var(--fanui-font-size-xs);color:var(--fanui-color-text-muted)}
+.fanui-legend__item{display:inline-flex;align-items:center;gap:var(--fanui-space-2)}
+.fanui-legend__dot{width:10px;height:10px;border-radius:3px;background-color:var(--fanui-legend-color,var(--fanui-primary));flex:0 0 auto}
+.fanui-legend__value{font-variant-numeric:tabular-nums;color:var(--fanui-color-text-strong);font-weight:var(--fanui-font-weight-medium)}
+.fanui-usage{display:flex;flex-direction:column;gap:var(--fanui-space-2)}
+.fanui-usage__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--fanui-space-3);font-size:var(--fanui-font-size-sm);color:var(--fanui-color-text-muted)}
+.fanui-usage__value{font-variant-numeric:tabular-nums;color:var(--fanui-color-text-strong);font-weight:var(--fanui-font-weight-semibold)}
+.fanui-usage__track{height:8px;border-radius:var(--fanui-radius-full);background-color:var(--fanui-color-surface-sunken);overflow:hidden}
+.fanui-usage__bar{height:100%;width:var(--fanui-usage-value,60%);border-radius:inherit;background-image:linear-gradient(to right,var(--fanui-primary),var(--fanui-primary-vivid));transition:width 300ms cubic-bezier(0,0,0.2,1) 0s,background-color 300ms cubic-bezier(0,0,0.2,1) 0s}
+.fanui-usage--warning .fanui-usage__bar{background-image:linear-gradient(to right,var(--fanui-warning),var(--fanui-warning-vivid))}
+.fanui-usage--danger .fanui-usage__bar{background-image:linear-gradient(to right,var(--fanui-danger),var(--fanui-danger-vivid))}
+.fanui-usage--striped .fanui-usage__bar{background-image:linear-gradient(45deg,rgba(255,255,255,0.18) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.18) 50%,rgba(255,255,255,0.18) 75%,transparent 75%,transparent),linear-gradient(to right,var(--fanui-primary),var(--fanui-primary-vivid));background-size:1rem 1rem,100% 100%;animation:fanui-stripes 1s linear infinite}@keyframes fanui-stripes{from{background-position:0 0,0 0}
+to{background-position:1rem 0,0 0}}
+.fanui-kanban{display:flex;gap:var(--fanui-space-4);align-items:flex-start;overflow-x:auto;padding-bottom:var(--fanui-space-3);scrollbar-width:thin;scrollbar-color:rgba(100,116,139,0.45) transparent}
+.fanui-kanban::-webkit-scrollbar{width:8px;height:8px}
+.fanui-kanban::-webkit-scrollbar-track{background:transparent}
+.fanui-kanban::-webkit-scrollbar-thumb{background:rgba(100,116,139,0.45);border-radius:9999px}
+.fanui-kanban::-webkit-scrollbar-thumb:hover{background:rgba(100,116,139,0.7)}
+.fanui-kanban__column{flex:0 0 288px;display:flex;flex-direction:column;gap:var(--fanui-space-3);padding:var(--fanui-space-3);border-radius:var(--fanui-radius-xl);background-color:var(--fanui-color-surface-sunken);transition:background-color 150ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-kanban__column.is-dragover{background-color:var(--fanui-primary-soft);box-shadow:inset 0 0 0 2px var(--fanui-primary-border)}
+.fanui-kanban__head{display:flex;align-items:center;justify-content:space-between;gap:var(--fanui-space-2);padding-inline:var(--fanui-space-1)}
+.fanui-kanban__title{display:inline-flex;align-items:center;gap:var(--fanui-space-2);font-size:var(--fanui-font-size-sm);font-weight:var(--fanui-font-weight-semibold);color:var(--fanui-color-text-strong)}
+.fanui-kanban__title::before{content:"";width:8px;height:8px;border-radius:var(--fanui-radius-full);background-color:var(--fanui-column-color,var(--fanui-primary))}
+.fanui-kanban__count{min-width:20px;padding:0 6px;font-size:var(--fanui-font-size-xs);line-height:18px;text-align:center;font-variant-numeric:tabular-nums;color:var(--fanui-color-text-muted);background-color:var(--fanui-color-surface);border-radius:var(--fanui-radius-full)}
+.fanui-kanban__list{display:flex;flex-direction:column;gap:var(--fanui-space-2);margin:0;padding:0;list-style:none;min-height:24px}
+.fanui-kanban__card{display:flex;flex-direction:column;gap:var(--fanui-space-2);padding:var(--fanui-space-3);border:1px solid var(--fanui-color-border);border-radius:var(--fanui-radius-lg);background-color:var(--fanui-color-surface);cursor:grab;transition:transform 150ms cubic-bezier(0.4,0,0.2,1) 0s,box-shadow 150ms cubic-bezier(0.4,0,0.2,1) 0s,opacity 150ms cubic-bezier(0.4,0,0.2,1) 0s,border-color 150ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-kanban__card:hover{transform:translateY(-1px);border-color:var(--fanui-primary-border);box-shadow:var(--fanui-shadow-md)}
+.fanui-kanban__card:active{cursor:grabbing}
+.fanui-kanban__card.is-dragging{opacity:0.5;transform:rotate(1.5deg) scale(0.98);border-style:dashed}
+.fanui-kanban__card.is-drop-target{border-color:var(--fanui-primary);box-shadow:0 0 0 3px var(--fanui-primary-ring)}
+.fanui-kanban__card-title{font-size:var(--fanui-font-size-sm);font-weight:var(--fanui-font-weight-medium);line-height:var(--fanui-line-height-snug);color:var(--fanui-color-text)}
+.fanui-kanban__card-meta{display:flex;align-items:center;justify-content:space-between;gap:var(--fanui-space-2);font-size:var(--fanui-font-size-xs);color:var(--fanui-color-text-subtle)}
+.fanui-kanban__labels{display:flex;flex-wrap:wrap;gap:4px}
+.fanui-kanban__label{padding:1px 7px;font-size:11px;border-radius:var(--fanui-radius-full);background-color:var(--fanui-label-bg,var(--fanui-primary-soft));color:var(--fanui-label-fg,var(--fanui-primary-ink))}
+.fanui-kanban__add{display:flex;align-items:center;gap:var(--fanui-space-2);padding:var(--fanui-space-2) var(--fanui-space-3);border:1px dashed var(--fanui-color-border-strong);border-radius:var(--fanui-radius-lg);background:transparent;font:inherit;font-size:var(--fanui-font-size-sm);color:var(--fanui-color-text-muted);cursor:pointer;transition:border-color 150ms cubic-bezier(0.4,0,0.2,1) 0s,color 150ms cubic-bezier(0.4,0,0.2,1) 0s,background-color 150ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-kanban__add:hover{border-color:var(--fanui-primary);color:var(--fanui-primary);background-color:var(--fanui-primary-soft)}
+.fanui-kanban__avatars{display:flex}
+.fanui-kanban__avatars>*{width:22px;height:22px;border-radius:var(--fanui-radius-full);border:2px solid var(--fanui-color-surface);margin-inline-start:-6px;display:grid;place-items:center;font-size:10px;background-color:var(--fanui-primary-soft-2);color:var(--fanui-primary-ink)}
+.fanui-kanban__avatars>*:first-child{margin-inline-start:0}
+.fanui-activity{display:flex;flex-direction:column;gap:var(--fanui-space-4);margin:0;padding:0;list-style:none}
+.fanui-activity__item{position:relative;display:flex;gap:var(--fanui-space-3);padding-inline-start:var(--fanui-space-1)}
+.fanui-activity__item:not(:last-child)::before{content:"";position:absolute;inset-block:26px calc(var(--fanui-space-4) * -1);inset-inline-start:13px;width:1px;background-color:var(--fanui-color-border)}
+.fanui-activity__icon{position:relative;z-index:1;display:grid;place-items:center;width:26px;height:26px;flex:0 0 auto;border-radius:var(--fanui-radius-full);font-size:var(--fanui-font-size-xs);color:var(--fanui-primary-fg);background-color:var(--fanui-primary);box-shadow:0 0 0 3px var(--fanui-color-surface)}
+.fanui-activity__body{flex:1 1 auto;min-width:0}
+.fanui-activity__text{font-size:var(--fanui-font-size-sm);line-height:var(--fanui-line-height-snug);color:var(--fanui-color-text)}
+.fanui-activity__text strong{font-weight:var(--fanui-font-weight-semibold);color:var(--fanui-color-text-strong)}
+.fanui-activity__text a{color:var(--fanui-primary);text-decoration:none}
+.fanui-activity__text a:hover{text-decoration:underline}
+.fanui-activity__time{display:block;margin-top:2px;font-size:var(--fanui-font-size-xs);color:var(--fanui-color-text-subtle)}
+.fanui-activity__quote{margin-top:var(--fanui-space-2);padding:var(--fanui-space-2) var(--fanui-space-3);border-inline-start:2px solid var(--fanui-color-border);border-radius:var(--fanui-radius-sm);background-color:var(--fanui-color-surface-sunken);font-size:var(--fanui-font-size-xs);color:var(--fanui-color-text-muted)}
+.fanui-activity--compact{gap:var(--fanui-space-3)}
+.fanui-activity--compact .fanui-activity__icon{width:22px;height:22px}
+.fanui-activity--compact .fanui-activity__item:not(:last-child)::before{inset-inline-start:11px;inset-block-start:22px}
+.fanui-notify{position:relative}
+.fanui-notify__trigger{position:relative;display:grid;place-items:center;width:36px;height:36px;border:1px solid transparent;border-radius:var(--fanui-radius-md);background:transparent;color:var(--fanui-color-text-muted);cursor:pointer;transition:background-color 150ms cubic-bezier(0.4,0,0.2,1) 0s,color 150ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-notify__trigger:hover{background-color:var(--fanui-color-hover);color:var(--fanui-color-text)}
+.fanui-notify__dot{position:absolute;inset-block-start:6px;inset-inline-end:6px;min-width:16px;height:16px;padding:0 4px;display:grid;place-items:center;font-size:10px;font-weight:var(--fanui-font-weight-semibold);line-height:1;color:var(--fanui-danger-fg);background-color:var(--fanui-danger);border-radius:var(--fanui-radius-full);box-shadow:0 0 0 2px var(--fanui-color-bg)}
+.fanui-notify__dot.is-pulse::after{content:"";position:absolute;inset:0;border-radius:inherit;background-color:inherit;animation:fanui-notify-pulse 1.8s cubic-bezier(0,0,0.2,1) infinite}
+.fanui-notify__panel{position:absolute;inset-inline-end:0;inset-block-start:calc(100% + 8px);z-index:var(--fanui-z-dropdown);width:360px;max-width:calc(100vw - 32px);max-height:440px;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--fanui-glass-border,var(--fanui-color-border));border-radius:var(--fanui-radius-xl);background-color:var(--fanui-color-overlay);box-shadow:var(--fanui-shadow-2xl);opacity:0;visibility:hidden;transform:translateY(-6px) scale(0.98);transform-origin:top right;transition:opacity 200ms cubic-bezier(0.34,1.56,0.64,1) 0s,transform 200ms cubic-bezier(0.34,1.56,0.64,1) 0s,visibility 200ms cubic-bezier(0.34,1.56,0.64,1) 0s}
+.fanui-notify__panel.is-open{opacity:1;visibility:visible;transform:none}
+.fanui-notify__head{display:flex;align-items:center;justify-content:space-between;gap:var(--fanui-space-3);padding:var(--fanui-space-3) var(--fanui-space-4);border-bottom:1px solid var(--fanui-color-border-subtle);font-size:var(--fanui-font-size-sm);font-weight:var(--fanui-font-weight-semibold);color:var(--fanui-color-text-strong)}
+.fanui-notify__list{flex:1 1 auto;overflow-y:auto;margin:0;padding:var(--fanui-space-1);list-style:none;scrollbar-width:thin;scrollbar-color:rgba(100,116,139,0.45) transparent}
+.fanui-notify__list::-webkit-scrollbar{width:6px;height:6px}
+.fanui-notify__list::-webkit-scrollbar-track{background:transparent}
+.fanui-notify__list::-webkit-scrollbar-thumb{background:rgba(100,116,139,0.45);border-radius:9999px}
+.fanui-notify__list::-webkit-scrollbar-thumb:hover{background:rgba(100,116,139,0.7)}
+.fanui-notify__item{display:flex;gap:var(--fanui-space-3);padding:var(--fanui-space-3);border-radius:var(--fanui-radius-md);cursor:pointer;transition:background-color 150ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-notify__item:hover{background-color:var(--fanui-color-hover)}
+.fanui-notify__item.is-unread{background-color:var(--fanui-primary-soft)}
+.fanui-notify__item.is-unread .fanui-notify__item-title::after{content:"";display:inline-block;width:6px;height:6px;margin-inline-start:6px;border-radius:var(--fanui-radius-full);background-color:var(--fanui-primary);vertical-align:middle}
+.fanui-notify__item-icon{display:grid;place-items:center;width:32px;height:32px;flex:0 0 auto;border-radius:var(--fanui-radius-md);background-color:var(--fanui-color-surface);color:var(--fanui-color-text-muted)}
+.fanui-notify__item-title{font-size:var(--fanui-font-size-sm);font-weight:var(--fanui-font-weight-medium);color:var(--fanui-color-text-strong)}
+.fanui-notify__item-desc{margin-top:2px;font-size:var(--fanui-font-size-xs);line-height:var(--fanui-line-height-snug);color:var(--fanui-color-text-muted)}
+.fanui-notify__item-time{margin-top:4px;font-size:var(--fanui-font-size-xs);color:var(--fanui-color-text-subtle)}
+.fanui-notify__foot{padding:var(--fanui-space-2) var(--fanui-space-4);border-top:1px solid var(--fanui-color-border-subtle);text-align:center;font-size:var(--fanui-font-size-sm)}
+.fanui-notify__foot a{color:var(--fanui-primary);text-decoration:none}@keyframes fanui-notify-pulse{0%{opacity:0.6;transform:scale(1)}
+70%{opacity:0;transform:scale(2.2)}
+100%{opacity:0;transform:scale(2.2)}}
+.fanui-filter-bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--fanui-space-3);padding:var(--fanui-space-3);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-filter-bar::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-filter-bar{background-color:var(--fanui-glass-fallback-bg);background-image:none}}
+.fanui-filter-bar{--fanui-glass-radius:var(--fanui-radius-xl)}
+.fanui-filter-bar__search{position:relative;flex:1 1 240px;min-width:200px}
+.fanui-filter-bar__search 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-filter-bar__search input::placeholder{color:var(--fanui-color-text-subtle);opacity:1}
+.fanui-filter-bar__search input::-webkit-input-placeholder{color:var(--fanui-color-text-subtle);opacity:1}
+.fanui-filter-bar__search input::-moz-placeholder{color:var(--fanui-color-text-subtle);opacity:1}
+.fanui-filter-bar__search input:-ms-input-placeholder{color:var(--fanui-color-text-subtle);opacity:1}
+.fanui-filter-bar__search input:hover:not(:disabled):not(.is-disabled){border-color:var(--fanui-color-border-strong)}
+.fanui-filter-bar__search input:focus,.fanui-filter-bar__search 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-filter-bar__search input:focus,.fanui-filter-bar__search input:focus-visible{outline:2px solid transparent;outline-offset:2px}}
+.fanui-filter-bar__search input:disabled,.fanui-filter-bar__search input.is-disabled{background-color:var(--fanui-color-disabled-bg);color:var(--fanui-color-disabled-text);cursor:not-allowed;resize:none}
+.fanui-filter-bar__search input[readonly]{background-color:var(--fanui-color-surface-sunken)}
+.fanui-filter-bar__search input{padding-inline-start:34px}
+.fanui-filter-bar__search svg,.fanui-filter-bar__search .fanui-icon{position:absolute;inset-inline-start:10px;inset-block-start:50%;transform:translateY(-50%);color:var(--fanui-color-text-subtle);pointer-events:none}
+.fanui-filter-bar__chips{display:flex;flex-wrap:wrap;gap:var(--fanui-space-2)}
+.fanui-filter-bar__chip{display:inline-flex;align-items:center;gap:var(--fanui-space-1);padding:4px 12px;border:1px solid var(--fanui-color-border);border-radius:var(--fanui-radius-full);background-color:var(--fanui-color-surface);font:inherit;font-size:var(--fanui-font-size-sm);color:var(--fanui-color-text-muted);cursor:pointer;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,transform 150ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-filter-bar__chip:hover{border-color:var(--fanui-primary-border);color:var(--fanui-primary-ink)}
+.fanui-filter-bar__chip:active{transform:scale(0.97)}
+.fanui-filter-bar__chip.is-active{color:var(--fanui-primary-fg);background-color:var(--fanui-primary);border-color:var(--fanui-primary)}
+.fanui-filter-bar__chip-count{font-size:var(--fanui-font-size-xs);opacity:0.75;font-variant-numeric:tabular-nums}
+.fanui-filter-bar__spacer{flex:1 1 auto}
+.fanui-filter-bar__views{display:inline-flex;padding:2px;border-radius:var(--fanui-radius-md);background-color:var(--fanui-glass-divider)}
+.fanui-filter-bar__views button{display:grid;place-items:center;width:30px;height:26px;border:0;border-radius:var(--fanui-radius-sm);background:transparent;color:var(--fanui-color-text-muted);cursor:pointer;transition:background-color 150ms cubic-bezier(0.4,0,0.2,1) 0s,color 150ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-filter-bar__views button.is-active{background-color:var(--fanui-color-surface);color:var(--fanui-primary);box-shadow:var(--fanui-shadow-xs)}