zenkit-css 1.2.0 → 1.2.1

package/dist/zenkit.css

@@ -26574,6 +26574,1585 @@ li .kbd {
   border-color: var(--gray-700);
 }
 
+.menubar {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem;
+  background-color: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 0.375rem;
+}
+
+.menubar-item {
+  position: relative;
+}
+
+.menubar-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.375rem 0.75rem;
+  font-size: var(--text-sm);
+  font-weight: 500;
+  color: var(--text);
+  background-color: transparent;
+  border: none;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  transition: all 150ms ease-in-out;
+  white-space: nowrap;
+}
+.menubar-trigger:hover {
+  background-color: var(--gray-100);
+}
+.menubar-trigger:focus {
+  outline: none;
+  background-color: var(--gray-100);
+}
+.menubar-trigger[aria-expanded=true] {
+  background-color: var(--gray-100);
+}
+
+.menubar-trigger-icon {
+  width: 1rem;
+  height: 1rem;
+  color: var(--text-muted);
+}
+
+.menubar-content {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  min-width: 200px;
+  padding: 0.375rem;
+  background-color: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 0.375rem;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  z-index: 1000;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-4px);
+  transition: opacity 150ms ease-in-out, visibility 150ms ease-in-out, transform 150ms ease-in-out;
+}
+
+.menubar-item:hover .menubar-content,
+.menubar-item:focus-within .menubar-content,
+.menubar-content.open {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+.menubar-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  font-size: var(--text-sm);
+  color: var(--text);
+  background: transparent;
+  border: none;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  transition: background-color 150ms ease-in-out;
+  width: 100%;
+  text-align: left;
+}
+.menubar-menu-item:hover {
+  background-color: var(--gray-100);
+}
+.menubar-menu-item:focus {
+  outline: none;
+  background-color: var(--gray-100);
+}
+.menubar-menu-item:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.menubar-menu-icon {
+  width: 1rem;
+  height: 1rem;
+  color: var(--text-muted);
+  flex-shrink: 0;
+}
+
+.menubar-menu-label {
+  flex: 1;
+}
+
+.menubar-menu-shortcut {
+  font-size: var(--text-xs);
+  color: var(--text-muted);
+  margin-left: auto;
+}
+
+.menubar-submenu {
+  position: relative;
+}
+
+.menubar-submenu-trigger {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+.menubar-submenu-trigger::after {
+  content: "";
+  margin-left: auto;
+  border: solid var(--text-muted);
+  border-width: 0 1.5px 1.5px 0;
+  padding: 2.5px;
+  transform: rotate(-45deg);
+}
+
+.menubar-submenu-content {
+  position: absolute;
+  left: calc(100% + 4px);
+  top: -0.375rem;
+  min-width: 180px;
+  padding: 0.375rem;
+  background-color: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 0.375rem;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  opacity: 0;
+  visibility: hidden;
+  transform: translateX(-4px);
+  transition: opacity 150ms ease-in-out, visibility 150ms ease-in-out, transform 150ms ease-in-out;
+}
+
+.menubar-submenu:hover .menubar-submenu-content,
+.menubar-submenu:focus-within .menubar-submenu-content {
+  opacity: 1;
+  visibility: visible;
+  transform: translateX(0);
+}
+
+.menubar-separator {
+  height: 1px;
+  background-color: var(--border);
+  margin: 0.375rem 0;
+}
+
+.menubar-group-label {
+  padding: 0.375rem 0.75rem;
+  font-size: var(--text-xs);
+  font-weight: 500;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.menubar-checkbox {
+  position: relative;
+  padding-left: 1.75rem;
+}
+.menubar-checkbox::before {
+  content: "";
+  position: absolute;
+  left: 0.5rem;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 1rem;
+  height: 1rem;
+  border: 1.5px solid var(--border);
+  border-radius: 3px;
+  transition: all 150ms ease-in-out;
+}
+.menubar-checkbox[data-checked=true]::before {
+  background-color: var(--primary);
+  border-color: var(--primary);
+}
+.menubar-checkbox[data-checked=true]::after {
+  content: "";
+  position: absolute;
+  left: 0.75rem;
+  top: 50%;
+  transform: translateY(-60%) rotate(45deg);
+  width: 4px;
+  height: 8px;
+  border: solid var(--white);
+  border-width: 0 2px 2px 0;
+}
+
+.menubar-radio {
+  position: relative;
+  padding-left: 1.75rem;
+}
+.menubar-radio::before {
+  content: "";
+  position: absolute;
+  left: 0.5rem;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 1rem;
+  height: 1rem;
+  border: 1.5px solid var(--border);
+  border-radius: 50%;
+  transition: all 150ms ease-in-out;
+}
+.menubar-radio[data-checked=true]::before {
+  border-color: var(--primary);
+}
+.menubar-radio[data-checked=true]::after {
+  content: "";
+  position: absolute;
+  left: 0.75rem;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 6px;
+  height: 6px;
+  background-color: var(--primary);
+  border-radius: 50%;
+}
+
+.menubar-sm {
+  padding: 0.125rem;
+}
+.menubar-sm .menubar-trigger {
+  padding: 0.25rem 0.5rem;
+  font-size: var(--text-xs);
+}
+.menubar-sm .menubar-menu-item {
+  padding: 0.375rem 0.5rem;
+  font-size: var(--text-xs);
+}
+
+.menubar-lg {
+  padding: 0.375rem;
+}
+.menubar-lg .menubar-trigger {
+  padding: 0.5rem 1rem;
+  font-size: var(--text-base);
+}
+.menubar-lg .menubar-menu-item {
+  padding: 0.625rem 1rem;
+  font-size: var(--text-base);
+}
+
+.menubar-borderless {
+  border: none;
+  background: transparent;
+  padding: 0;
+}
+
+.menubar-filled {
+  background-color: var(--gray-50);
+}
+
+[data-theme=dark] .menubar {
+  background-color: var(--gray-900);
+  border-color: var(--gray-700);
+}
+[data-theme=dark] .menubar-trigger:hover,
+[data-theme=dark] .menubar-trigger:focus,
+[data-theme=dark] .menubar-trigger[aria-expanded=true] {
+  background-color: var(--gray-800);
+}
+[data-theme=dark] .menubar-content {
+  background-color: var(--gray-900);
+  border-color: var(--gray-700);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+}
+[data-theme=dark] .menubar-menu-item:hover,
+[data-theme=dark] .menubar-menu-item:focus {
+  background-color: var(--gray-800);
+}
+[data-theme=dark] .menubar-submenu-content {
+  background-color: var(--gray-900);
+  border-color: var(--gray-700);
+}
+[data-theme=dark] .menubar-separator {
+  background-color: var(--gray-700);
+}
+[data-theme=dark] .menubar-filled {
+  background-color: var(--gray-800);
+}
+
+.nav-menu {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.nav-menu-list {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.nav-menu-item {
+  position: relative;
+}
+
+.nav-menu-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.5rem 0.875rem;
+  font-size: var(--text-sm);
+  font-weight: 500;
+  color: var(--text);
+  background: transparent;
+  border: none;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  transition: all 150ms ease-in-out;
+  white-space: nowrap;
+  text-decoration: none;
+}
+.nav-menu-trigger:hover {
+  background-color: var(--gray-100);
+  color: var(--text);
+}
+.nav-menu-trigger:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--primary-200);
+}
+.nav-menu-trigger[data-active=true] {
+  color: var(--primary);
+}
+
+.nav-menu-trigger-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+  color: var(--text-muted);
+  transition: transform 150ms ease-in-out;
+}
+
+.nav-menu-item:hover .nav-menu-trigger-icon,
+.nav-menu-trigger[aria-expanded=true] .nav-menu-trigger-icon {
+  transform: rotate(180deg);
+}
+
+.nav-menu-content {
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+  min-width: 400px;
+  padding: 1rem;
+  background-color: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 0.75rem;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
+  z-index: 1000;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out;
+}
+
+.nav-menu-item:hover .nav-menu-content,
+.nav-menu-content.open {
+  opacity: 1;
+  visibility: visible;
+}
+
+.nav-menu-viewport {
+  position: relative;
+  overflow: hidden;
+}
+
+.nav-menu-grid {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.nav-menu-grid-2 {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.nav-menu-grid-3 {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.nav-menu-grid-4 {
+  grid-template-columns: repeat(4, 1fr);
+}
+
+.nav-menu-link {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 0.75rem;
+  border-radius: 0.375rem;
+  text-decoration: none;
+  color: var(--text);
+  transition: background-color 150ms ease-in-out;
+}
+.nav-menu-link:hover {
+  background-color: var(--gray-100);
+}
+.nav-menu-link:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--primary-200);
+}
+
+.nav-menu-link-icon {
+  width: 2rem;
+  height: 2rem;
+  padding: 0.375rem;
+  background-color: var(--primary-100);
+  color: var(--primary);
+  border-radius: 0.375rem;
+  margin-bottom: 0.25rem;
+}
+.nav-menu-link-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.nav-menu-link-title {
+  font-size: var(--text-sm);
+  font-weight: 600;
+  color: var(--text);
+}
+
+.nav-menu-link-description {
+  font-size: var(--text-xs);
+  color: var(--text-muted);
+  line-height: 1.4;
+}
+
+.nav-menu-featured {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 1rem;
+  background: linear-gradient(135deg, var(--primary-50), var(--primary-100));
+  border-radius: 0.375rem;
+  text-decoration: none;
+  color: var(--text);
+}
+.nav-menu-featured:hover {
+  background: linear-gradient(135deg, var(--primary-100), var(--primary-200));
+}
+
+.nav-menu-featured-title {
+  font-size: var(--text-base);
+  font-weight: 600;
+}
+
+.nav-menu-featured-description {
+  font-size: var(--text-sm);
+  color: var(--text-muted);
+}
+
+.nav-menu-category {
+  margin-bottom: 0.75rem;
+}
+.nav-menu-category:last-child {
+  margin-bottom: 0;
+}
+
+.nav-menu-category-title {
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 0.5rem;
+  padding: 0 0.75rem;
+}
+
+.nav-menu-category-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.nav-menu-simple-link {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  font-size: var(--text-sm);
+  color: var(--text);
+  text-decoration: none;
+  border-radius: 0.25rem;
+  transition: background-color 150ms ease-in-out;
+}
+.nav-menu-simple-link:hover {
+  background-color: var(--gray-100);
+}
+.nav-menu-simple-link svg {
+  width: 1rem;
+  height: 1rem;
+  color: var(--text-muted);
+}
+
+.nav-menu-indicator {
+  position: absolute;
+  bottom: -8px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 12px;
+  height: 12px;
+  background-color: var(--bg);
+  border: 1px solid var(--border);
+  border-right: none;
+  border-bottom: none;
+  transform: translateX(-50%) rotate(45deg);
+  opacity: 0;
+  transition: opacity 150ms ease-in-out;
+}
+
+.nav-menu-item:hover .nav-menu-indicator {
+  opacity: 1;
+}
+
+.nav-menu-sm .nav-menu-trigger {
+  padding: 0.375rem 0.625rem;
+  font-size: var(--text-xs);
+}
+.nav-menu-sm .nav-menu-content {
+  min-width: 300px;
+  padding: 0.75rem;
+}
+
+.nav-menu-lg .nav-menu-trigger {
+  padding: 0.625rem 1rem;
+  font-size: var(--text-base);
+}
+.nav-menu-lg .nav-menu-content {
+  min-width: 500px;
+  padding: 1.25rem;
+}
+
+.nav-menu-full .nav-menu-content {
+  left: 0;
+  right: 0;
+  transform: none;
+  min-width: auto;
+  border-radius: 0 0 0.75rem 0.75rem;
+}
+
+.nav-menu-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 0.75rem;
+  margin-top: 0.75rem;
+  border-top: 1px solid var(--border);
+}
+
+.nav-menu-footer-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: var(--text-sm);
+  color: var(--primary);
+  text-decoration: none;
+}
+.nav-menu-footer-link:hover {
+  text-decoration: underline;
+}
+.nav-menu-footer-link svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+.nav-menu-vertical {
+  flex-direction: column;
+  align-items: flex-start;
+}
+.nav-menu-vertical .nav-menu-list {
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+}
+.nav-menu-vertical .nav-menu-trigger {
+  width: 100%;
+  justify-content: space-between;
+}
+.nav-menu-vertical .nav-menu-content {
+  position: static;
+  transform: none;
+  box-shadow: none;
+  border: none;
+  padding: 0 0 0 1rem;
+  margin-top: 0.25rem;
+}
+
+[data-theme=dark] .nav-menu-trigger:hover {
+  background-color: var(--gray-800);
+}
+[data-theme=dark] .nav-menu-content {
+  background-color: var(--gray-900);
+  border-color: var(--gray-700);
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
+}
+[data-theme=dark] .nav-menu-link:hover,
+[data-theme=dark] .nav-menu-simple-link:hover {
+  background-color: var(--gray-800);
+}
+[data-theme=dark] .nav-menu-link-icon {
+  background-color: rgba(79, 70, 229, 0.2);
+}
+[data-theme=dark] .nav-menu-featured {
+  background: linear-gradient(135deg, rgba(79, 70, 229, 0.1), rgba(79, 70, 229, 0.2));
+}
+[data-theme=dark] .nav-menu-featured:hover {
+  background: linear-gradient(135deg, rgba(79, 70, 229, 0.15), rgba(79, 70, 229, 0.25));
+}
+[data-theme=dark] .nav-menu-indicator {
+  background-color: var(--gray-900);
+  border-color: var(--gray-700);
+}
+[data-theme=dark] .nav-menu-footer {
+  border-color: var(--gray-700);
+}
+
+.fieldset {
+  border: 1px solid var(--border);
+  border-radius: 0.75rem;
+  padding: 1.25rem;
+  margin: 0;
+}
+
+.fieldset-legend {
+  font-size: var(--text-sm);
+  font-weight: 600;
+  color: var(--text);
+  padding: 0 0.5rem;
+  margin-left: -0.5rem;
+}
+
+.fieldset-borderless {
+  border: none;
+  padding: 0;
+}
+.fieldset-borderless .fieldset-legend {
+  padding: 0;
+  margin-left: 0;
+  margin-bottom: 0.75rem;
+}
+
+.fieldset-filled {
+  background-color: var(--gray-50);
+  border-color: transparent;
+}
+
+.fieldset-content {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.fieldset-content-horizontal {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 1.5rem;
+}
+
+.fieldset-description {
+  font-size: var(--text-sm);
+  color: var(--text-muted);
+  margin-top: -0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.fieldset-sm {
+  padding: 0.875rem;
+}
+.fieldset-sm .fieldset-legend {
+  font-size: var(--text-xs);
+}
+.fieldset-sm .fieldset-content {
+  gap: 0.75rem;
+}
+
+.fieldset-lg {
+  padding: 1.5rem;
+}
+.fieldset-lg .fieldset-legend {
+  font-size: var(--text-base);
+}
+.fieldset-lg .fieldset-content {
+  gap: 1.25rem;
+}
+
+.fieldset:disabled,
+.fieldset-disabled {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+.fieldset-card {
+  background-color: var(--bg);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+.fieldset-card .fieldset-legend {
+  background-color: var(--bg);
+}
+
+.fieldset-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.fieldset-title {
+  font-size: var(--text-base);
+  font-weight: 600;
+  color: var(--text);
+}
+
+.fieldset-subtitle {
+  font-size: var(--text-sm);
+  color: var(--text-muted);
+  margin-top: 0.125rem;
+}
+
+.fieldset-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.fieldset-icon {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.fieldset-icon-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  background-color: var(--primary-100);
+  color: var(--primary);
+  border-radius: 0.375rem;
+}
+.fieldset-icon-wrapper svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.fieldset .fieldset {
+  background-color: var(--bg);
+  border-color: var(--border);
+}
+
+.fieldset-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  margin-top: 1rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--border);
+}
+
+.fieldset-collapsible .fieldset-legend {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  user-select: none;
+}
+.fieldset-collapsible .fieldset-legend::before {
+  content: "";
+  display: inline-block;
+  width: 0;
+  height: 0;
+  border: solid var(--text);
+  border-width: 0 2px 2px 0;
+  padding: 3px;
+  transform: rotate(45deg);
+  transition: transform 150ms ease-in-out;
+}
+.fieldset-collapsible.collapsed .fieldset-legend::before {
+  transform: rotate(-45deg);
+}
+.fieldset-collapsible.collapsed .fieldset-content {
+  display: none;
+}
+
+.fieldset-error {
+  border-color: var(--danger);
+}
+.fieldset-error .fieldset-legend {
+  color: var(--danger);
+}
+
+.fieldset-error-message {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: var(--text-sm);
+  color: var(--danger);
+  margin-top: 0.5rem;
+}
+.fieldset-error-message svg {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+}
+
+.fieldset-success {
+  border-color: var(--success);
+}
+.fieldset-success .fieldset-legend {
+  color: var(--success);
+}
+
+.fieldset-primary {
+  border-color: var(--primary-200);
+  background-color: var(--primary-50);
+}
+.fieldset-primary .fieldset-legend {
+  color: var(--primary-700);
+}
+
+.fieldset-warning {
+  border-color: var(--warning-200);
+  background-color: var(--warning-50);
+}
+.fieldset-warning .fieldset-legend {
+  color: var(--warning-700);
+}
+
+.fieldset-info {
+  border-color: var(--info-200);
+  background-color: var(--info-50);
+}
+.fieldset-info .fieldset-legend {
+  color: var(--info-700);
+}
+
+.fieldset-row {
+  display: grid;
+  gap: 1rem;
+}
+
+.fieldset-row-2 {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.fieldset-row-3 {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.fieldset-row-4 {
+  grid-template-columns: repeat(4, 1fr);
+}
+
+@media (max-width: 767px) {
+  .fieldset-row-2,
+  .fieldset-row-3,
+  .fieldset-row-4 {
+    grid-template-columns: 1fr;
+  }
+}
+[data-theme=dark] .fieldset {
+  border-color: var(--gray-700);
+}
+[data-theme=dark] .fieldset-filled {
+  background-color: var(--gray-800);
+}
+[data-theme=dark] .fieldset-card {
+  background-color: var(--gray-900);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+[data-theme=dark] .fieldset-card .fieldset-legend {
+  background-color: var(--gray-900);
+}
+[data-theme=dark] .fieldset-header {
+  border-color: var(--gray-700);
+}
+[data-theme=dark] .fieldset-footer {
+  border-color: var(--gray-700);
+}
+[data-theme=dark] .fieldset .fieldset {
+  background-color: var(--gray-800);
+  border-color: var(--gray-700);
+}
+[data-theme=dark] .fieldset-icon-wrapper {
+  background-color: rgba(79, 70, 229, 0.2);
+}
+[data-theme=dark] .fieldset-primary {
+  border-color: rgba(79, 70, 229, 0.3);
+  background-color: rgba(79, 70, 229, 0.1);
+}
+[data-theme=dark] .fieldset-warning {
+  border-color: rgba(245, 158, 11, 0.3);
+  background-color: rgba(245, 158, 11, 0.1);
+}
+[data-theme=dark] .fieldset-info {
+  border-color: rgba(6, 182, 212, 0.3);
+  background-color: rgba(6, 182, 212, 0.1);
+}
+
+.pin-input {
+  display: inline-flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.pin-input-field {
+  width: 3rem;
+  height: 3rem;
+  padding: 0;
+  font-family: var(--font-mono);
+  font-size: 1.5rem;
+  font-weight: 600;
+  text-align: center;
+  color: var(--text);
+  background-color: var(--bg);
+  border: 2px solid var(--border);
+  border-radius: 0.375rem;
+  transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out, background-color 150ms ease-in-out;
+  caret-color: var(--primary);
+}
+.pin-input-field::placeholder {
+  color: var(--gray-300);
+}
+.pin-input-field:focus {
+  outline: none;
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
+}
+.pin-input-field::-webkit-outer-spin-button, .pin-input-field::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.pin-input-field[type=number] {
+  -moz-appearance: textfield;
+}
+
+.pin-input-xs {
+  gap: 0.25rem;
+}
+.pin-input-xs .pin-input-field {
+  width: 2rem;
+  height: 2rem;
+  font-size: 1rem;
+}
+
+.pin-input-sm {
+  gap: 0.375rem;
+}
+.pin-input-sm .pin-input-field {
+  width: 2.5rem;
+  height: 2.5rem;
+  font-size: 1.25rem;
+}
+
+.pin-input-md {
+  gap: 0.5rem;
+}
+.pin-input-md .pin-input-field {
+  width: 3rem;
+  height: 3rem;
+  font-size: 1.5rem;
+}
+
+.pin-input-lg {
+  gap: 0.625rem;
+}
+.pin-input-lg .pin-input-field {
+  width: 3.5rem;
+  height: 3.5rem;
+  font-size: 1.75rem;
+}
+
+.pin-input-xl {
+  gap: 0.75rem;
+}
+.pin-input-xl .pin-input-field {
+  width: 4rem;
+  height: 4rem;
+  font-size: 2rem;
+}
+
+.pin-input-field:disabled {
+  background-color: var(--bg-muted);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.pin-input-field[readonly] {
+  background-color: var(--bg-muted);
+  cursor: default;
+}
+
+.pin-input-error .pin-input-field {
+  border-color: var(--danger);
+}
+.pin-input-error .pin-input-field:focus {
+  border-color: var(--danger);
+  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
+}
+
+.pin-input-success .pin-input-field {
+  border-color: var(--success);
+}
+.pin-input-success .pin-input-field:focus {
+  border-color: var(--success);
+  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
+}
+
+.pin-input-field.filled,
+.pin-input-field:not(:placeholder-shown) {
+  border-color: var(--primary-300);
+  background-color: var(--primary-50);
+}
+
+.pin-input-underline .pin-input-field {
+  border-width: 0 0 2px 0;
+  border-radius: 0;
+  background: transparent;
+}
+.pin-input-underline .pin-input-field:focus {
+  box-shadow: none;
+  border-color: var(--primary);
+}
+
+.pin-input-rounded .pin-input-field {
+  border-radius: 9999px;
+}
+
+.pin-input-ghost .pin-input-field {
+  border-color: transparent;
+  background-color: var(--gray-100);
+}
+.pin-input-ghost .pin-input-field:focus {
+  background-color: var(--bg);
+  border-color: var(--primary);
+}
+
+.pin-input-flushed .pin-input-field {
+  border: none;
+  border-bottom: 2px solid var(--border);
+  border-radius: 0;
+  background: transparent;
+}
+.pin-input-flushed .pin-input-field:focus {
+  box-shadow: none;
+  border-color: var(--primary);
+}
+
+.pin-input-separator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  color: var(--text-muted);
+  font-size: 1.25rem;
+}
+.pin-input-separator::before {
+  content: "-";
+}
+
+.pin-input-separator-dot::before {
+  content: "•";
+}
+
+.pin-input-masked .pin-input-field {
+  -webkit-text-security: disc;
+  text-security: disc;
+}
+
+.pin-input-alphanumeric .pin-input-field {
+  text-transform: uppercase;
+}
+
+.pin-input-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.pin-input-label {
+  font-size: var(--text-sm);
+  font-weight: 500;
+  color: var(--text);
+}
+
+.pin-input-help {
+  font-size: var(--text-xs);
+  color: var(--text-muted);
+}
+
+.pin-input-error-text {
+  font-size: var(--text-xs);
+  color: var(--danger);
+}
+
+.pin-input-complete .pin-input-field {
+  animation: pin-input-success 0.3s ease-out;
+  border-color: var(--success);
+  background-color: var(--success-50);
+}
+
+@keyframes pin-input-success {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+.pin-input-shake {
+  animation: pin-input-shake 0.4s ease-out;
+}
+
+@keyframes pin-input-shake {
+  0%, 100% {
+    transform: translateX(0);
+  }
+  20%, 60% {
+    transform: translateX(-4px);
+  }
+  40%, 80% {
+    transform: translateX(4px);
+  }
+}
+.pin-input-loading {
+  position: relative;
+  pointer-events: none;
+}
+.pin-input-loading::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 1.5rem;
+  height: 1.5rem;
+  border: 2px solid var(--primary);
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+.pin-input-loading .pin-input-field {
+  opacity: 0.5;
+}
+
+.pin-input-otp .pin-input-field {
+  ime-mode: disabled;
+  -webkit-ime-mode: disabled;
+}
+
+.pin-input-group {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.pin-input-group + .pin-input-separator + .pin-input-group {
+  margin-left: 0;
+}
+
+.pin-input-resend {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 1rem;
+}
+
+.pin-input-resend-text {
+  font-size: var(--text-sm);
+  color: var(--text-muted);
+}
+
+.pin-input-resend-link {
+  font-size: var(--text-sm);
+  color: var(--primary);
+  cursor: pointer;
+  text-decoration: none;
+}
+.pin-input-resend-link:hover {
+  text-decoration: underline;
+}
+.pin-input-resend-link:disabled, .pin-input-resend-link.disabled {
+  color: var(--text-muted);
+  cursor: not-allowed;
+}
+
+.pin-input-timer {
+  font-weight: 500;
+  color: var(--text);
+}
+
+[data-theme=dark] .pin-input-field {
+  background-color: var(--gray-800);
+  border-color: var(--gray-600);
+}
+[data-theme=dark] .pin-input-field:focus {
+  background-color: var(--gray-900);
+}
+[data-theme=dark] .pin-input-ghost .pin-input-field {
+  background-color: var(--gray-700);
+}
+[data-theme=dark] .pin-input-ghost .pin-input-field:focus {
+  background-color: var(--gray-800);
+}
+[data-theme=dark] .pin-input-field.filled,
+[data-theme=dark] .pin-input-field:not(:placeholder-shown) {
+  background-color: var(--gray-700);
+}
+[data-theme=dark] .pin-input-complete .pin-input-field {
+  background-color: rgba(16, 185, 129, 0.2);
+}
+
+.editable {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.editable-block {
+  display: flex;
+  width: 100%;
+}
+
+.editable-preview {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.25rem 0.5rem;
+  margin: -0.25rem -0.5rem;
+  font-size: inherit;
+  color: var(--text);
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  transition: all 150ms ease-in-out;
+  min-height: 2rem;
+  word-break: break-word;
+}
+.editable-preview:hover {
+  background-color: var(--gray-100);
+  border-color: var(--gray-200);
+}
+.editable-preview:focus {
+  outline: none;
+  background-color: var(--gray-100);
+  border-color: var(--primary);
+  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
+}
+
+.editable-preview-placeholder {
+  color: var(--text-muted);
+  font-style: italic;
+}
+
+.editable-edit-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  color: var(--text-muted);
+  opacity: 0;
+  transition: opacity 150ms ease-in-out;
+}
+.editable-edit-icon svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+.editable-preview:hover .editable-edit-icon,
+.editable-preview:focus .editable-edit-icon {
+  opacity: 1;
+}
+
+.editable-input {
+  width: 100%;
+  padding: 0.375rem 0.5rem;
+  font-size: inherit;
+  font-family: inherit;
+  color: var(--text);
+  background-color: var(--bg);
+  border: 1px solid var(--primary);
+  border-radius: 0.375rem;
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
+  transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
+}
+.editable-input:focus {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
+}
+
+.editable-textarea {
+  width: 100%;
+  min-height: 80px;
+  padding: 0.5rem;
+  font-size: inherit;
+  font-family: inherit;
+  color: var(--text);
+  background-color: var(--bg);
+  border: 1px solid var(--primary);
+  border-radius: 0.375rem;
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
+  resize: vertical;
+}
+
+.editable-controls {
+  display: inline-flex;
+  gap: 0.25rem;
+  margin-left: 0.5rem;
+}
+
+.editable-controls-below {
+  display: flex;
+  gap: 0.25rem;
+  margin-top: 0.5rem;
+}
+
+.editable-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  padding: 0;
+  background-color: transparent;
+  border: 1px solid var(--border);
+  border-radius: 0.375rem;
+  cursor: pointer;
+  transition: all 150ms ease-in-out;
+}
+.editable-btn svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+.editable-btn-submit {
+  color: var(--success);
+  border-color: var(--success-200);
+}
+.editable-btn-submit:hover {
+  background-color: var(--success);
+  border-color: var(--success);
+  color: var(--white);
+}
+
+.editable-btn-cancel {
+  color: var(--danger);
+  border-color: var(--danger-200);
+}
+.editable-btn-cancel:hover {
+  background-color: var(--danger);
+  border-color: var(--danger);
+  color: var(--white);
+}
+
+.editable-sm {
+  font-size: var(--text-sm);
+}
+.editable-sm .editable-preview {
+  padding: 0.125rem 0.375rem;
+  min-height: 1.5rem;
+}
+.editable-sm .editable-input {
+  padding: 0.25rem 0.375rem;
+}
+.editable-sm .editable-btn {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.editable-lg {
+  font-size: var(--text-lg);
+}
+.editable-lg .editable-preview {
+  padding: 0.375rem 0.625rem;
+  min-height: 2.5rem;
+}
+.editable-lg .editable-input {
+  padding: 0.5rem 0.625rem;
+}
+.editable-lg .editable-btn {
+  width: 2rem;
+  height: 2rem;
+}
+
+.editable-heading {
+  font-weight: 600;
+}
+.editable-heading .editable-preview {
+  font-weight: 600;
+}
+
+.editable-h1 {
+  font-size: 2rem;
+}
+
+.editable-h2 {
+  font-size: 1.5rem;
+}
+
+.editable-h3 {
+  font-size: 1.25rem;
+}
+
+.editable-underline .editable-preview {
+  padding: 0;
+  margin: 0;
+  border: none;
+  border-bottom: 1px dashed transparent;
+  border-radius: 0;
+  background: transparent;
+}
+.editable-underline .editable-preview:hover {
+  border-bottom-color: var(--primary);
+  background: transparent;
+}
+
+.editable-always-show-icon .editable-edit-icon {
+  opacity: 0.5;
+}
+.editable-always-show-icon .editable-preview:hover .editable-edit-icon {
+  opacity: 1;
+}
+
+.editable-double-click .editable-preview {
+  cursor: text;
+}
+.editable-double-click .editable-preview:hover {
+  background: transparent;
+  border-color: transparent;
+}
+
+.editable-disabled {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+.editable-readonly .editable-preview {
+  cursor: default;
+}
+.editable-readonly .editable-preview:hover {
+  background: transparent;
+  border-color: transparent;
+}
+.editable-readonly .editable-edit-icon {
+  display: none;
+}
+
+.editable-loading {
+  position: relative;
+  pointer-events: none;
+}
+.editable-loading::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  right: 0.5rem;
+  transform: translateY(-50%);
+  width: 1rem;
+  height: 1rem;
+  border: 2px solid var(--primary);
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+
+.editable-error .editable-input,
+.editable-error .editable-textarea {
+  border-color: var(--danger);
+  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15);
+}
+
+.editable-error-message {
+  font-size: var(--text-xs);
+  color: var(--danger);
+  margin-top: 0.25rem;
+}
+
+.editable-char-count {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 0.25rem;
+  font-size: var(--text-xs);
+  color: var(--text-muted);
+}
+
+.editable-char-count-warning {
+  color: var(--warning);
+}
+
+.editable-char-count-error {
+  color: var(--danger);
+}
+
+.editable-with-affix {
+  display: flex;
+  align-items: center;
+}
+
+.editable-prefix,
+.editable-suffix {
+  font-size: inherit;
+  color: var(--text-muted);
+  padding: 0 0.25rem;
+}
+
+.editable-table-cell .editable-preview {
+  width: 100%;
+  padding: 0.5rem;
+  margin: 0;
+  border-radius: 0;
+}
+.editable-table-cell .editable-input {
+  width: 100%;
+  border-radius: 0;
+}
+
+.editable-form {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+.editable-form-input {
+  flex: 1;
+}
+
+[data-theme=dark] .editable-preview:hover {
+  background-color: var(--gray-800);
+  border-color: var(--gray-700);
+}
+[data-theme=dark] .editable-preview:focus {
+  background-color: var(--gray-800);
+}
+[data-theme=dark] .editable-input,
+[data-theme=dark] .editable-textarea {
+  background-color: var(--gray-900);
+  border-color: var(--primary);
+}
+[data-theme=dark] .editable-btn {
+  border-color: var(--gray-600);
+}
+[data-theme=dark] .editable-btn-submit {
+  border-color: rgba(16, 185, 129, 0.3);
+}
+[data-theme=dark] .editable-btn-cancel {
+  border-color: rgba(239, 68, 68, 0.3);
+}
+
 .accordion {
   --accordion-color: var(--text);
   --accordion-bg: transparent;