@zhang_jifan/fanui 2.1.0

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

@@ -0,0 +1,76 @@
+@charset "UTF-8";.fanui-navbar{--fanui-navbar-height:56px;--fanui-navbar-bg:var(--fanui-color-surface);--fanui-navbar-border:var(--fanui-color-border);position:relative;display:flex;align-items:center;gap:var(--fanui-space-4);min-height:var(--fanui-navbar-height);padding:0 var(--fanui-container-px,16px);background-color:var(--fanui-navbar-bg);border-bottom:1px solid var(--fanui-navbar-border);box-sizing:border-box;z-index:var(--fanui-z-sticky,1020)}
+.fanui-navbar--sticky{position:sticky;top:0}
+.fanui-navbar--fixed{position:fixed;top:0;right:0;left:0}
+.fanui-navbar--glass{background-color:rgba(255,255,255,0.78);backdrop-filter:blur(14px) saturate(180%);-webkit-backdrop-filter:blur(14px) saturate(180%);border-bottom-color:rgba(15,23,42,0.06)}
+:root[data-fanui-theme=dark] .fanui-navbar--glass{background-color:rgba(15,23,42,0.72);backdrop-filter:blur(14px) saturate(180%);-webkit-backdrop-filter:blur(14px) saturate(180%);border-bottom-color:rgba(255,255,255,0.08)}
+.fanui-navbar--dark{--fanui-navbar-bg:#0f172a;--fanui-navbar-border:rgba(255,255,255,0.08);color:#f1f5f9}
+.fanui-navbar--borderless{border-bottom-color:transparent}
+.fanui-navbar__inner{display:flex;align-items:center;gap:var(--fanui-space-4);width:100%;max-width:var(--fanui-navbar-max-width,none);margin:0 auto}
+.fanui-navbar__brand{display:inline-flex;align-items:center;gap:var(--fanui-space-2);flex:0 0 auto;font-size:var(--fanui-font-size-md);font-weight:700;color:var(--fanui-color-text-strong);text-decoration:none;white-space:nowrap;letter-spacing:-0.01em}
+.fanui-navbar__brand:hover{text-decoration:none}
+.fanui-navbar__brand img,.fanui-navbar__brand svg{height:24px;width:auto}
+.fanui-navbar__menu{display:flex;align-items:center;gap:var(--fanui-space-1);flex:1 1 auto;min-width:0}
+.fanui-navbar__actions{display:flex;align-items:center;gap:var(--fanui-space-2);flex:0 0 auto;margin-inline-start:auto}
+.fanui-navbar__toggle{display:none;flex:0 0 auto}@media (max-width:767.95px){.fanui-navbar__toggle{display:inline-flex}}
+.fanui-navbar__divider{width:1px;height:20px;background-color:var(--fanui-color-border);flex:0 0 auto}@media (max-width:767.95px){.fanui-navbar__menu{display:none}
+.fanui-navbar__menu.is-open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;padding:var(--fanui-space-2);background-color:var(--fanui-color-surface);border-bottom:1px solid var(--fanui-color-border);box-shadow:var(--fanui-shadow-lg)}}
+.fanui-nav{display:flex;align-items:center;gap:var(--fanui-space-1);list-style:none;margin:0;padding:0}
+.fanui-nav--vertical{flex-direction:column;align-items:stretch}
+.fanui-nav--pill{padding:3px;background-color:var(--fanui-color-surface-sunken);border-radius:var(--fanui-radius-md)}
+.fanui-nav--underline{gap:var(--fanui-space-5)}
+.fanui-nav__item{position:relative;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;font-size:var(--fanui-font-size-base);font-weight:500;line-height:1.4;color:var(--fanui-color-text-muted);text-decoration:none;border-radius:var(--fanui-radius-base);cursor:pointer;white-space:nowrap;box-sizing:border-box;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-nav__item:hover{color:var(--fanui-color-text-strong);background-color:var(--fanui-color-hover);text-decoration:none}
+.fanui-nav__item:focus-visible{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-nav__item:focus-visible{outline:2px solid transparent;outline-offset:2px}}
+.fanui-nav__item.is-active,.fanui-nav__item[aria-current=page]{color:var(--fanui-primary);background-color:var(--fanui-primary-soft);font-weight:600}
+.fanui-nav__item.is-disabled,.fanui-nav__item[aria-disabled=true]{color:var(--fanui-color-disabled-text);pointer-events:none;cursor:not-allowed}
+.fanui-nav__item__icon{display:inline-flex;flex:0 0 auto;font-size:1.1em;line-height:1}
+.fanui-nav__item__badge{margin-inline-start:auto}
+.fanui-nav--underline .fanui-nav__item{padding:10px 0;background:none;border-radius:0}
+.fanui-nav--underline .fanui-nav__item:hover{background:none}
+.fanui-nav--underline .fanui-nav__item::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background-color:transparent;border-radius:2px;transition:background-color 150ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-nav--underline .fanui-nav__item.is-active::after,.fanui-nav--underline .fanui-nav__item[aria-current=page]::after{background-color:var(--fanui-primary)}
+.fanui-nav--vertical .fanui-nav__item{width:100%;justify-content:flex-start}
+.fanui-nav--pill .fanui-nav__item.is-active{color:var(--fanui-color-text-strong);background-color:var(--fanui-color-surface);box-shadow:var(--fanui-shadow-xs)}
+.fanui-nav__item--sm{padding:5px 9px;font-size:var(--fanui-font-size-sm)}
+.fanui-nav__item--lg{padding:11px 16px;font-size:var(--fanui-font-size-md)}
+.fanui-sidebar{--fanui-sidebar-width:240px;display:flex;flex-direction:column;width:var(--fanui-sidebar-width);flex:0 0 auto;padding:var(--fanui-space-4) var(--fanui-space-3);gap:var(--fanui-space-1);background-color:var(--fanui-color-surface);border-inline-end:1px solid var(--fanui-color-border);box-sizing:border-box;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(100,116,139,0.45) transparent}
+.fanui-sidebar::-webkit-scrollbar{width:8px;height:8px}
+.fanui-sidebar::-webkit-scrollbar-track{background:transparent}
+.fanui-sidebar::-webkit-scrollbar-thumb{background:rgba(100,116,139,0.45);border-radius:9999px}
+.fanui-sidebar::-webkit-scrollbar-thumb:hover{background:rgba(100,116,139,0.7)}
+.fanui-sidebar--end{border-inline-end:0;border-inline-start:1px solid var(--fanui-color-border)}
+.fanui-sidebar--sunken{background-color:var(--fanui-color-surface-sunken)}
+.fanui-sidebar--bordered-none{border:0}
+.fanui-sidebar__section{margin-top:var(--fanui-space-4)}
+.fanui-sidebar__section:first-child{margin-top:0}
+.fanui-sidebar__title{padding:var(--fanui-space-2) var(--fanui-space-3);font-size:var(--fanui-font-size-xs);font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--fanui-color-text-subtle)}
+.fanui-sidebar__item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 12px;font-size:var(--fanui-font-size-base);color:var(--fanui-color-text-muted);text-decoration:none;border-radius:var(--fanui-radius-base);cursor:pointer;box-sizing:border-box;transition:color 150ms cubic-bezier(0.4,0,0.2,1) 0s,background-color 150ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-sidebar__item:hover{color:var(--fanui-color-text-strong);background-color:var(--fanui-color-hover);text-decoration:none}
+.fanui-sidebar__item.is-active{color:var(--fanui-primary);background-color:var(--fanui-primary-soft);font-weight:600}
+.fanui-sidebar__item__icon{flex:0 0 auto;display:inline-flex;width:18px;justify-content:center}
+.fanui-sidebar__item__text{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.fanui-sidebar__item__badge{flex:0 0 auto}
+.fanui-sidebar__item__arrow{flex:0 0 auto;font-size:12px;opacity:0.6;transition:transform 150ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-sidebar__item[aria-expanded=true] .fanui-sidebar__item__arrow{transform:rotate(90deg)}
+.fanui-sidebar__sub{display:flex;flex-direction:column;gap:2px;padding-inline-start:var(--fanui-space-6);margin-top:2px}
+.fanui-sidebar--collapsed{--fanui-sidebar-width:64px}
+.fanui-sidebar--collapsed .fanui-sidebar__item{justify-content:center;padding:10px 0}
+.fanui-sidebar--collapsed .fanui-sidebar__item__text,.fanui-sidebar--collapsed .fanui-sidebar__title,.fanui-sidebar--collapsed .fanui-sidebar__item__badge,.fanui-sidebar--collapsed .fanui-sidebar__item__arrow{display:none}
+.fanui-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:var(--fanui-space-2);list-style:none;margin:0;padding:0;font-size:var(--fanui-font-size-sm);color:var(--fanui-color-text-muted)}
+.fanui-breadcrumb__item{display:inline-flex;align-items:center;gap:var(--fanui-space-2)}
+.fanui-breadcrumb__item a{color:var(--fanui-color-text-muted);text-decoration:none}
+.fanui-breadcrumb__item a:hover{color:var(--fanui-primary);text-decoration:none}
+.fanui-breadcrumb__item + .fanui-breadcrumb__item::before,.fanui-breadcrumb__separator{content:"/";color:var(--fanui-color-text-subtle);user-select:none}
+.fanui-breadcrumb__item.is-active,.fanui-breadcrumb__item[aria-current=page]{color:var(--fanui-color-text-strong);font-weight:500}
+.fanui-breadcrumb--arrow .fanui-breadcrumb__separator{content:"›"}
+.fanui-breadcrumb--chevron .fanui-breadcrumb__item + .fanui-breadcrumb__item::before{content:"›"}
+.fanui-menu{display:flex;flex-direction:column;gap:2px;list-style:none;margin:0;padding:0;min-width:160px}
+.fanui-menu__item{display:flex;align-items:center;gap:10px;padding:7px 12px;font-size:var(--fanui-font-size-base);color:var(--fanui-color-text);text-decoration:none;border-radius:var(--fanui-radius-base);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-menu__item:hover{background-color:var(--fanui-color-hover);text-decoration:none;color:var(--fanui-color-text-strong)}
+.fanui-menu__item.is-active{color:var(--fanui-primary);background-color:var(--fanui-primary-soft)}
+.fanui-menu__item.is-disabled{color:var(--fanui-color-disabled-text);pointer-events:none}
+.fanui-menu__label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.fanui-menu__shortcut{flex:0 0 auto;font-size:var(--fanui-font-size-xs);color:var(--fanui-color-text-subtle);font-family:var(--fanui-font-mono)}
+.fanui-menu__divider{height:1px;margin:5px 2px;background-color:var(--fanui-color-border-subtle)}
+.fanui-menu__group-title{padding:8px 12px 4px;font-size:var(--fanui-font-size-xs);font-weight:600;color:var(--fanui-color-text-subtle);text-transform:uppercase;letter-spacing:0.05em}
+.fanui-menu--horizontal{flex-direction:row;align-items:center}

package/dist/modules/fanui-overlay.css

@@ -0,0 +1,547 @@
+/* fanUI v2.1.0 · module: overlay（独立产物，自带令牌） */
+.fanui-modal {
+  position: fixed;
+  inset: 0;
+  z-index: var(--fanui-z-modal, 1060);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--fanui-space-4);
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0s, visibility 200ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+.fanui-modal.is-open, .fanui-modal.is-active {
+  opacity: 1;
+  visibility: visible;
+}
+.fanui-modal.is-open > .fanui-modal__dialog, .fanui-modal.is-active > .fanui-modal__dialog {
+  transform: translateY(0) scale(1);
+}
+.fanui-modal__backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: var(--fanui-backdrop-bg, rgba(15, 23, 42, 0.55));
+  backdrop-filter: blur(var(--fanui-backdrop-blur, 2px));
+  -webkit-backdrop-filter: blur(var(--fanui-backdrop-blur, 2px));
+  z-index: var(--fanui-z-backdrop, 1040);
+  z-index: 0;
+}
+.fanui-modal__dialog {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: var(--fanui-modal-width, 520px);
+  max-height: calc(100vh - var(--fanui-space-8));
+  margin: auto;
+  background-color: var(--fanui-color-surface);
+  border: 1px solid var(--fanui-color-border);
+  border-radius: var(--fanui-radius-xl);
+  box-shadow: var(--fanui-shadow-2xl);
+  box-sizing: border-box;
+  transform: translateY(12px) scale(0.98);
+  transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1) 0s;
+  overflow: hidden;
+}
+.fanui-modal__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--fanui-space-4);
+  padding: var(--fanui-space-5) var(--fanui-space-5) var(--fanui-space-4);
+  flex: 0 0 auto;
+}
+.fanui-modal__title {
+  margin: 0;
+  font-size: var(--fanui-font-size-lg);
+  font-weight: 600;
+  line-height: 1.4;
+  color: var(--fanui-color-text-strong);
+}
+.fanui-modal__desc {
+  margin: 4px 0 0;
+  font-size: var(--fanui-font-size-sm);
+  color: var(--fanui-color-text-muted);
+}
+.fanui-modal__close {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  margin: -4px -6px 0 0;
+  padding: 0;
+  font-size: 16px;
+  line-height: 1;
+  color: var(--fanui-color-text-subtle);
+  background: none;
+  border: 0;
+  border-radius: var(--fanui-radius-base);
+  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;
+}
+.fanui-modal__close:hover {
+  color: var(--fanui-color-text);
+  background-color: var(--fanui-color-hover);
+}
+.fanui-modal__close:focus-visible {
+  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-modal__close:focus-visible {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+  }
+}
+.fanui-modal__body {
+  flex: 1 1 auto;
+  padding: 0 var(--fanui-space-5) var(--fanui-space-5);
+  overflow-y: auto;
+  min-height: 0;
+  font-size: var(--fanui-font-size-base);
+  line-height: var(--fanui-line-height-relaxed);
+  color: var(--fanui-color-text);
+  scrollbar-width: thin;
+  scrollbar-color: rgba(100, 116, 139, 0.45) transparent;
+}
+.fanui-modal__body::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+.fanui-modal__body::-webkit-scrollbar-track {
+  background: transparent;
+}
+.fanui-modal__body::-webkit-scrollbar-thumb {
+  background: rgba(100, 116, 139, 0.45);
+  border-radius: 9999px;
+}
+.fanui-modal__body::-webkit-scrollbar-thumb:hover {
+  background: rgba(100, 116, 139, 0.7);
+}
+.fanui-modal__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--fanui-space-3);
+  padding: var(--fanui-space-4) var(--fanui-space-5);
+  background-color: var(--fanui-color-surface-sunken);
+  border-top: 1px solid var(--fanui-color-border);
+  flex: 0 0 auto;
+}
+.fanui-modal__footer--start {
+  justify-content: flex-start;
+}
+.fanui-modal__footer--between {
+  justify-content: space-between;
+}
+.fanui-modal__header--bordered {
+  padding-bottom: var(--fanui-space-4);
+  border-bottom: 1px solid var(--fanui-color-border);
+}
+.fanui-modal--sm > .fanui-modal__dialog {
+  --fanui-modal-width: 380px;
+}
+.fanui-modal--md > .fanui-modal__dialog {
+  --fanui-modal-width: 520px;
+}
+.fanui-modal--lg > .fanui-modal__dialog {
+  --fanui-modal-width: 720px;
+}
+.fanui-modal--xl > .fanui-modal__dialog {
+  --fanui-modal-width: 960px;
+}
+.fanui-modal--full > .fanui-modal__dialog {
+  --fanui-modal-width: 100%;
+  max-height: 100vh;
+  height: 100%;
+  border-radius: 0;
+  border: 0;
+}
+.fanui-modal--top {
+  align-items: flex-start;
+  padding-top: var(--fanui-space-16);
+}
+.fanui-modal--bottom {
+  align-items: flex-end;
+}
+.fanui-modal--plain > .fanui-modal__dialog {
+  border: 0;
+  box-shadow: var(--fanui-shadow-2xl);
+}
+.fanui-modal--scrollable > .fanui-modal__dialog {
+  overflow: hidden;
+}
+
+.fanui-modal-open {
+  overflow: hidden;
+}
+
+.fanui-drawer {
+  position: fixed;
+  inset: 0;
+  z-index: var(--fanui-z-offcanvas, 1050);
+  visibility: hidden;
+  transition: visibility 200ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
+}
+.fanui-drawer.is-open, .fanui-drawer.is-active {
+  visibility: visible;
+}
+.fanui-drawer__backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: var(--fanui-backdrop-bg, rgba(15, 23, 42, 0.55));
+  backdrop-filter: blur(var(--fanui-backdrop-blur, 2px));
+  -webkit-backdrop-filter: blur(var(--fanui-backdrop-blur, 2px));
+  z-index: var(--fanui-z-backdrop, 1040);
+  opacity: 0;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
+}
+.fanui-drawer.is-open > .fanui-drawer__backdrop {
+  opacity: 1;
+}
+.fanui-drawer__panel {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  width: var(--fanui-drawer-width, 360px);
+  max-width: 92vw;
+  background-color: var(--fanui-color-surface);
+  box-shadow: var(--fanui-shadow-2xl);
+  box-sizing: border-box;
+  transition: transform 300ms cubic-bezier(0, 0, 0.2, 1) 0s;
+  z-index: 1;
+}
+.fanui-drawer__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--fanui-space-3);
+  padding: var(--fanui-space-4) var(--fanui-space-5);
+  border-bottom: 1px solid var(--fanui-color-border);
+  flex: 0 0 auto;
+}
+.fanui-drawer__title {
+  margin: 0;
+  font-size: var(--fanui-font-size-md);
+  font-weight: 600;
+  color: var(--fanui-color-text-strong);
+}
+.fanui-drawer__body {
+  flex: 1 1 auto;
+  padding: var(--fanui-space-5);
+  overflow-y: auto;
+  min-height: 0;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(100, 116, 139, 0.45) transparent;
+}
+.fanui-drawer__body::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+.fanui-drawer__body::-webkit-scrollbar-track {
+  background: transparent;
+}
+.fanui-drawer__body::-webkit-scrollbar-thumb {
+  background: rgba(100, 116, 139, 0.45);
+  border-radius: 9999px;
+}
+.fanui-drawer__body::-webkit-scrollbar-thumb:hover {
+  background: rgba(100, 116, 139, 0.7);
+}
+.fanui-drawer__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--fanui-space-3);
+  padding: var(--fanui-space-4) var(--fanui-space-5);
+  border-top: 1px solid var(--fanui-color-border);
+  flex: 0 0 auto;
+}
+.fanui-drawer--start .fanui-drawer__panel {
+  left: 0;
+  right: auto;
+  transform: translateX(-100%);
+}
+.fanui-drawer--end .fanui-drawer__panel {
+  right: 0;
+  left: auto;
+  transform: translateX(100%);
+}
+.fanui-drawer--top .fanui-drawer__panel {
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: auto;
+  width: 100%;
+  max-width: none;
+  height: var(--fanui-drawer-height, 320px);
+  transform: translateY(-100%);
+  border-radius: 0 0 var(--fanui-radius-xl) var(--fanui-radius-xl);
+}
+.fanui-drawer--bottom .fanui-drawer__panel {
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: auto;
+  width: 100%;
+  max-width: none;
+  height: var(--fanui-drawer-height, auto);
+  max-height: 88vh;
+  transform: translateY(100%);
+  border-radius: var(--fanui-radius-xl) var(--fanui-radius-xl) 0 0;
+}
+.fanui-drawer.is-open > .fanui-drawer__panel {
+  transform: translate(0, 0);
+}
+.fanui-drawer--sm > .fanui-drawer__panel {
+  --fanui-drawer-width: 280px;
+}
+.fanui-drawer--lg > .fanui-drawer__panel {
+  --fanui-drawer-width: 480px;
+}
+.fanui-drawer--xl > .fanui-drawer__panel {
+  --fanui-drawer-width: 640px;
+}
+.fanui-drawer--full > .fanui-drawer__panel {
+  --fanui-drawer-width: 100%;
+  max-width: none;
+}
+.fanui-drawer__grabber {
+  width: 36px;
+  height: 4px;
+  margin: var(--fanui-space-2) auto 0;
+  border-radius: 9999px;
+  background-color: var(--fanui-color-border-strong);
+  flex: 0 0 auto;
+}
+
+.fanui-dropdown {
+  position: relative;
+  display: inline-flex;
+}
+.fanui-dropdown__menu {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  z-index: var(--fanui-z-dropdown, 1000);
+  min-width: var(--fanui-dropdown-width, 180px);
+  max-width: 320px;
+  padding: 6px;
+  background-color: var(--fanui-color-surface);
+  border: 1px solid var(--fanui-color-border);
+  border-radius: var(--fanui-radius-md);
+  box-shadow: var(--fanui-shadow-lg);
+  box-sizing: border-box;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-4px) scale(0.98);
+  transform-origin: top left;
+  transition: opacity 150ms cubic-bezier(0, 0, 0.2, 1) 0s, visibility 150ms cubic-bezier(0, 0, 0.2, 1) 0s, transform 150ms cubic-bezier(0, 0, 0.2, 1) 0s;
+}
+.fanui-dropdown__menu.is-open, .fanui-dropdown__menu.is-active {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0) scale(1);
+}
+.fanui-dropdown__menu--end {
+  left: auto;
+  right: 0;
+  transform-origin: top right;
+}
+.fanui-dropdown__menu--start {
+  left: 0;
+  right: auto;
+}
+.fanui-dropdown__menu--up {
+  top: auto;
+  bottom: calc(100% + 6px);
+  transform-origin: bottom left;
+  transform: translateY(4px) scale(0.98);
+}
+.fanui-dropdown__menu--up.fanui-dropdown__menu--end {
+  transform-origin: bottom right;
+}
+.fanui-dropdown__menu--flush {
+  padding: 0;
+}
+.fanui-dropdown.is-open > .fanui-dropdown__trigger, .fanui-dropdown__trigger[aria-expanded=true] {
+  color: var(--fanui-color-text-strong);
+}
+
+.fanui-tooltip {
+  position: relative;
+  display: inline-flex;
+}
+.fanui-tooltip__bubble {
+  position: absolute;
+  z-index: var(--fanui-z-tooltip, 1080);
+  max-width: 260px;
+  padding: 6px 10px;
+  font-size: var(--fanui-font-size-xs);
+  line-height: 1.5;
+  white-space: normal;
+  text-align: center;
+  color: var(--fanui-color-surface);
+  background-color: var(--fanui-color-text-strong);
+  border-radius: var(--fanui-radius-base);
+  box-shadow: var(--fanui-shadow-md);
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s, visibility 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s, transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
+}
+.fanui-tooltip__bubble::after {
+  content: "";
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  background-color: inherit;
+  transform: rotate(45deg);
+}
+.fanui-tooltip__bubble {
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%) translateY(4px);
+}
+.fanui-tooltip__bubble::after {
+  top: 100%;
+  left: 50%;
+  margin: -3px 0 0 -3px;
+}
+.fanui-tooltip:hover > .fanui-tooltip__bubble, .fanui-tooltip:focus-within > .fanui-tooltip__bubble,
+.fanui-tooltip > .fanui-tooltip__bubble.is-open {
+  opacity: 1;
+  visibility: visible;
+}
+.fanui-tooltip:hover > .fanui-tooltip__bubble {
+  transform: translateX(-50%) translateY(0);
+}
+.fanui-tooltip--bottom:hover > .fanui-tooltip__bubble, .fanui-tooltip--bottom:focus-within > .fanui-tooltip__bubble {
+  transform: translateX(-50%) translateY(0);
+}
+.fanui-tooltip--right:hover > .fanui-tooltip__bubble, .fanui-tooltip--right:focus-within > .fanui-tooltip__bubble, .fanui-tooltip--left:hover > .fanui-tooltip__bubble, .fanui-tooltip--left:focus-within > .fanui-tooltip__bubble {
+  transform: translateY(-50%) translateX(0);
+}
+.fanui-tooltip--bottom > .fanui-tooltip__bubble {
+  bottom: auto;
+  top: calc(100% + 8px);
+  transform: translateX(-50%) translateY(-4px);
+}
+.fanui-tooltip--bottom > .fanui-tooltip__bubble::after {
+  top: auto;
+  bottom: 100%;
+  margin: 0 0 -3px -3px;
+}
+.fanui-tooltip--right > .fanui-tooltip__bubble {
+  bottom: auto;
+  top: 50%;
+  left: calc(100% + 8px);
+  transform: translateY(-50%) translateX(-4px);
+}
+.fanui-tooltip--right > .fanui-tooltip__bubble::after {
+  top: 50%;
+  left: 0;
+  margin: -3px 0 0 -3px;
+}
+.fanui-tooltip--left > .fanui-tooltip__bubble {
+  bottom: auto;
+  top: 50%;
+  left: auto;
+  right: calc(100% + 8px);
+  transform: translateY(-50%) translateX(4px);
+}
+.fanui-tooltip--left > .fanui-tooltip__bubble::after {
+  top: 50%;
+  left: 100%;
+  margin: -3px 0 0 -3px;
+}
+.fanui-tooltip--light > .fanui-tooltip__bubble {
+  color: var(--fanui-color-text);
+  background-color: var(--fanui-color-surface);
+  border: 1px solid var(--fanui-color-border-strong);
+}
+.fanui-tooltip--primary > .fanui-tooltip__bubble {
+  background-color: var(--fanui-primary);
+  color: var(--fanui-primary-fg);
+}
+.fanui-tooltip--danger > .fanui-tooltip__bubble {
+  background-color: var(--fanui-danger);
+  color: var(--fanui-danger-fg);
+}
+.fanui-tooltip--success > .fanui-tooltip__bubble {
+  background-color: var(--fanui-success);
+  color: var(--fanui-success-fg);
+}
+
+.fanui-popover {
+  position: relative;
+  display: inline-flex;
+}
+.fanui-popover__panel {
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  z-index: var(--fanui-z-popover, 1070);
+  width: var(--fanui-popover-width, 280px);
+  background-color: var(--fanui-color-surface);
+  border: 1px solid var(--fanui-color-border);
+  border-radius: var(--fanui-radius-md);
+  box-shadow: var(--fanui-shadow-xl);
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-4px);
+  transition: opacity 150ms cubic-bezier(0, 0, 0.2, 1) 0s, visibility 150ms cubic-bezier(0, 0, 0.2, 1) 0s, transform 150ms cubic-bezier(0, 0, 0.2, 1) 0s;
+}
+.fanui-popover__panel.is-open, .fanui-popover__panel.is-active {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+.fanui-popover__panel--end {
+  left: auto;
+  right: 0;
+}
+.fanui-popover__panel--center {
+  left: 50%;
+  transform: translateX(-50%) translateY(-4px);
+}
+.fanui-popover__panel--center.is-open {
+  transform: translateX(-50%) translateY(0);
+}
+.fanui-popover__panel--wide {
+  --fanui-popover-width: 420px;
+}
+.fanui-popover__header {
+  padding: var(--fanui-space-3) var(--fanui-space-4);
+  font-size: var(--fanui-font-size-base);
+  font-weight: 600;
+  color: var(--fanui-color-text-strong);
+  border-bottom: 1px solid var(--fanui-color-border-subtle);
+}
+.fanui-popover__body {
+  padding: var(--fanui-space-4);
+  font-size: var(--fanui-font-size-sm);
+  line-height: 1.6;
+  color: var(--fanui-color-text-muted);
+}
+.fanui-popover__footer {
+  padding: var(--fanui-space-3) var(--fanui-space-4);
+  border-top: 1px solid var(--fanui-color-border-subtle);
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--fanui-space-2);
+}